bootstrap 通过加减按钮实现输入框组功能
时间:2019-04-08
本文章向大家介绍bootstrap 通过加减按钮实现输入框组功能,主要包括bootstrap 通过加减按钮实现输入框组功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现效果图如下:
当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组
html代码如下:
<div class="input-group" id="centerIpGroup"> <label class="input-group-addon" id="basic-addon5">中心机IP:</label> <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled><span class="glyphicon glyphicon-plus"></span></button> </div>
+ 按钮 点击触发事件函数:
//添加中心机IP输入框项 function addCenterIpGrp(obj){ html = '<div class="input-group centerIp">'+ '<label class="input-group-addon">IP:</label>'+ '<input type="text" class="form-control" id="ipInput">'+ '<label class="input-group-addon">注释:</label>'+ '<input type="text" class="form-control" id="descInput">'+ '<span class="input-group-btn">'+ '<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>'+ '</span>'+ '</div>' obj.insertAdjacentHTML('beforebegin',html) }
- 按钮 点击触发事件函数:
$(document).on('click','#delCenterIpGrp',function(){ var el = this.parentNode.parentNode var centerIp = $(this).parent().parent().find('#ipInput').val() alertify.confirm('您确定要删除选中的命令?', function(e){ if(e){ el.parentNode.removeChild(el)}})})
总结
以上所述是小编给大家介绍的bootstrap 加减删除输入框组,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 图解:基于B+树索引结构,MySQL可以这么优化
- Android开发笔记:Retrofit + OkHttp3 + coroutines + LiveData打造一款网络请求框架
- Nginx安装与使用
- 基于Redis实现分布式锁
- 通过简单代码示例了解七大软件设计原则
- Flink在新浪微博的在线机器学习和实时数据分析
- Nginx + Keepalived使用文档
- 22+ 高频实用的 JavaScript 片段 (2020年)
- 文件上传C:fakepath解决方案
- Asp.net web api部署在某些服务器上老是404
- Spring解决循环依赖的思路
- Spring中Bean的创建流程
- 详解RocketMQ事务消息
- 带你白嫖程序带宽限制命令Trickle
- Fix SSH客户端登录会话超时设置