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

更新時間：2017年11月15日 14:02:57 作者：云中不知人

這篇文章主要介紹了bootstrap 輸入框組通過加減按鈕來增加刪除內(nèi)嵌輸入框組,當(dāng)我點擊 + 按鈕時，會添加一行輸入框組；當(dāng)點擊 - 按鈕時，會刪除這一行輸入框組。具體實現(xiàn)代碼大家參考下本文

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

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

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>

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

//添加中心機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) 
  }

- 按鈕點擊觸發(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)文章

如何實現(xiàn)JS函數(shù)的重載
如何實現(xiàn)JS函數(shù)的重載...
2006-09-09
js獲得當(dāng)前時區(qū)夏令時發(fā)生和終止的時間代碼
這篇文章主要介紹了js獲得當(dāng)前時區(qū)夏令時發(fā)生和終止的時間代碼,需要的朋友可以參考下
2014-02-02
three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
小程序雙頭slider選擇器的實現(xiàn)示例
這篇文章主要介紹了小程序雙頭slider選擇器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
微信小程序開發(fā)技巧匯總
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題，這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
網(wǎng)頁加載時頁面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進(jìn)度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
使用JS動態(tài)顯示文本
這篇文章主要為大家詳細(xì)介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
JS實現(xiàn)的加減乘除四則運算計算器示例
這篇文章主要介紹了JS實現(xiàn)的加減乘除四則運算計算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運算相關(guān)操作技巧,需要的朋友可以參考下
2017-08-08
Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法
在three.js中紋理貼圖是用來給物體表面添加圖案、顏色或者其他視覺效果的一種技術(shù),這篇文章主要給大家介紹了關(guān)于Three.js中紋理圖像應(yīng)用和屬性調(diào)整的相關(guān)資料,需要的朋友可以參考下
2024-01-01