欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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輸入框項 
  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('您確定要刪除選中的命令？', 
  function(e){ 
    if(e){ el.parentNode.removeChild(el)}})})

總結(jié)

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

相關(guān)文章

最新評論