亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

bootstrap 通過(guò)加減按鈕實(shí)現(xiàn)輸入框組功能

 更新時(shí)間：2017年11月15日 14:02:57   作者：云中不知人  
這篇文章主要介紹了bootstrap 輸入框組 通過(guò)加減按鈕來(lái)增加刪除內(nèi)嵌輸入框組,當(dāng)我點(diǎn)擊 + 按鈕時(shí)，會(huì)添加一行輸入框組；當(dāng)點(diǎn)擊 - 按鈕時(shí)，會(huì)刪除這一行輸入框組。具體實(shí)現(xiàn)代碼大家參考下本文

實(shí)現(xiàn)效果圖如下：

當(dāng)我點(diǎn)擊 + 按鈕時(shí)，會(huì)添加一行輸入框組；當(dāng)點(diǎn)擊 - 按鈕時(shí)，會(huì)刪除這一行輸入框組

html代碼如下：

<div class="input-group" id="centerIpGroup"> 
  <label class="input-group-addon" id="basic-addon5">中心機(jī)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>

+ 按鈕 點(diǎn)擊觸發(fā)事件函數(shù)：

//添加中心機(jī)IP輸入框項(xiàng) 
  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) 
  }

- 按鈕 點(diǎn)擊觸發(fā)事件函數(shù)：

$(document).on('click','#delCenterIpGrp',function(){ 
  var el = this.parentNode.parentNode 
  var centerIp = $(this).parent().parent().find('#ipInput').val() 
  alertify.confirm('您確定要?jiǎng)h除選中的命令？', 
  function(e){ 
    if(e){ el.parentNode.removeChild(el)}})})

總結(jié)

以上所述是小編給大家介紹的bootstrap 加減刪除輸入框組，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論