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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
Javascript函数的参数
Jul 16 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
javascript第一课
2007/02/27 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Django分组聚合查询实例分享
2020/04/29 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Django返回HTML文件的实现方法
2020/09/17 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
《有趣的发现》教学反思
2014/04/15 职场文书
小班评语大全
2014/05/04 职场文书
反对邪教标语
2014/06/30 职场文书
通信工程求职信
2014/07/16 职场文书
2015年少先队活动总结
2015/03/25 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
运动会1000米加油稿
2015/07/21 职场文书