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ù)的重載...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)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了小程序雙頭slider選擇器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題，這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
網(wǎng)頁加載時頁面顯示進度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要為大家詳細介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了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