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

「爱情、让人受尽委屈。」 2022-05-13 08:08 990阅读 0赞

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

HTML代码：

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);