bootstrap 輸入框組 通過加減按鈕來增加刪除內嵌輸入框組

實現效果圖如下:


當我點擊 + 按鈕時,會添加一行輸入框組;當點擊 - 按鈕時,會刪除這一行輸入框組

html代碼如下:

<div class="input-group" id="saltIpGroup">
	<label class="input-group-addon">salt配置:</label>
	
	<button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addSaltIpGrpBtn" οnclick="addSaltIpGrp(this)" disabled><span class="glyphicon glyphicon-plus"></span></button>
	
</div>



+ 按鈕 點擊觸發事件函數:

function addSaltIpGrp(obj){
	html = '<div class="input-group saltIp" style="width:100%;padding:0 0 1px 0;">'+
						'<label class="input-group-addon">IP:</label>'+
						'<input type="text" class="form-control" id="saltIp" style="max-width:145px;">'+
						'<label class="input-group-addon">API端口:</label>'+
						'<input type="text" class="form-control" id="apiPort" style="max-width:90px;">'+
						'<label class="input-group-addon">類型:</label>'+
						'<select class="form-control" id="saltType" style="min-width:70px;">'+
							'<option value="0">master</option>'+
							'<option value="1">代理</option>'+
						'</select>'+
						'<label class="input-group-addon">區域:</label>'+
						'<select class="form-control" id="overSeas" style="min-width:70px;">'+
							'<option value="0">大陸</option>'+
							'<option value="1">海外</option>'+
						'</select>'+							
						'<span class="input-group-btn">'+
    						'<button class="btn btn-info" type="button" data-toggle="tooltip" title="刪除" id="delSaltIpGrp"><span class="glyphicon glyphicon-minus"></span></button>'+
    					'</span>'+
					'</div>'
	obj.insertAdjacentHTML('beforebegin',html)
}


- 按鈕 點擊觸發事件函數:

$(document).on('click','#delSaltIpGrp',function(){
	var el = this.parentNode.parentNode
	var saltIp = $(this).parent().parent().find('#saltIp').val()
	if (saltIp == ""){
		el.parentNode.removeChild(el)
		return
	}
	alertify.confirm('您確定要刪除選中的命令?',
	function(e){
		if(e){
			$.ajax({
				'url':'/url',
				'type':'POST',
				'async':false,
				'dataType':'json',
				'data':{'type':'delSaltIp','projectId':projectId,'saltIp':saltIp},
				'success':function(result){
					if (result.code){
						el.parentNode.removeChild(el)
					}else {
						showError(result.msg)
					}
				}
			})
	
		}
	})
	
})


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章