bootstrap 通过加减按钮实现输入框组功能


Posted in Javascript onNovember 15, 2017

实现效果图如下:

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 加减删除输入框组,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript按位非运算符的使用方法
Nov 14 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 #Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 #Javascript
layui.js实现的表单验证功能示例
Nov 15 #Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 #Javascript
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 #Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js使用递归解析xml
2014/12/12 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python实现数据库编程方法详解
2015/06/09 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python字典底层实现原理详解
2019/12/18 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python通过len函数返回对象长度
2020/10/22 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
书法大赛策划方案
2014/06/04 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
入伍通知书
2015/04/23 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Redis集群的关闭与重启操作
2021/07/07 Redis
Opencv实现二维直方图的计算及绘制
2021/07/21 Python