實(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)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注