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 相关文章推荐
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript实现动态标签云
Oct 16 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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
php Session存储到Redis的方法
2013/11/04 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python队列的定义与使用方法示例
2017/06/24 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
探亲邀请信范文
2014/01/30 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
边城读书笔记
2015/06/29 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS