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" onclick="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)
					}
				}
			})
	
		}
	})
	
})


猜你喜欢

转载自blog.csdn.net/u011085172/article/details/78538338