bootstrap基于JS动态添加、删除、获取input输入框

 

这段代码支持动态添加、删除，bootstrap里面还有更简单的实现动态效果，我这里是需要做一些特殊的处理才使用这样的方式的，复制粘贴的时候记得把<div>里面的代码改了。

HTML代码：

            <div class="input-group" id="centerIpGroup"> 
			   <label class="input-group-addon">资源类型：</label>
				<div class="input-group centerIp">
			          <select id="mailType1" name="mailType1" class="form-control m-b mailType1" th:with="type=${@dict.getType('reward_type')}"   >
			          	<option value="">请选择</option>
	                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	               	  </select>
			          <label class="input-group-addon">道具：</label>
			          <input class="form-control rewardId" type="text" name="rewardId1" id="rewardId1"   />
			          <label class="input-group-addon">数量：</label>
			          <input class="form-control rewardNum" type="text" name="rewardNum1" id="rewardNum1"   />
			          <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>
		    <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" ><span class="glyphicon glyphicon-plus"></span></button>    
		</div>

JS动态添加输入框代码：

里面 rewardId 值是为了获取数据的时候好获取所以把它这样设置的

var rowCount = 1;//(资源)行数默认1行 

//添加资源输入框项 
		  function addCenterIpGrp(obj){ 
			rowCount++
			 html = '<div class="input-group centerIp">'+ 
	          '<select id="mailType'+rowCount+'" class="form-control m-b mailType'+rowCount+'" >'+ 
	          	'<option value="">请选择</option>'+
	            '<option value="2">道具</option>'+   
	          	'<option value="4">货币</option>'+
	          '</select>'+ 
	          '<label class="input-group-addon">道具：</label>'+ 
	                '<input class="form-control rewardId" type="text" name="rewardId'+rowCount+'" id="rewardId'+rowCount+'" >'+ 
	          ' <label class="input-group-addon">数量：</label>'+ 
	          		' <input class="form-control rewardNum" type="text" name="rewardNum'+rowCount+'" id="rewardNum'+rowCount+'" >'+
         	  ' <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) 
		  } 

JS动态添加输入框代码：

 $(document).on('click','#delCenterIpGrp',function(){ 
			  var el = this.parentNode.parentNode ;	
			  var centerIp = $(this).parent().parent().find('#ipInput').val() ;
			   el.parentNode.removeChild(el)
		}) 

获取动态添加的输入框中的值，最后格式使用JSON存储

 

var rewardArray = new Array();
for (var i=1; i <= rowCount; i++){
			var mailType = $('div .input-group .mailType'+i).val();
			var rewardId = $('div .input-group #rewardId'+i).val();
			var rewardNum = $('div .input-group #rewardNum'+i).val();
			if(( rewardId != "" || undefined != rewardId) && (rewardNum != ""|| undefined != rewardNum)){
				var obj = new Object();
				obj['type'] = mailType;
				obj['id'] = rewardId;
				obj['count'] = rewardNum;
				rewardArray.push(obj);
			}
		}
		 var rewardsJsonData = JSON.stringify(rewardArray);