动态添加和删除控件

项目有个功能是要做动态添加责任人,要求以及起至时间。最后的效果如下图:


点击加号按钮就可以添加一行记录,点击删除按钮就可以删除一行。

其实思路很简单,将一行信息用div标签(div1)包住,再添加一个div标签(id设为Div)把所有动态添加的内容包住;当点击加号按钮时,响应js函数,函数的主要任务是获取id为div1的对象,利用clonenode函数复制一份,并添加为id为Div的一个子节点(注意要改一下id,不然都一样就不好区分了)。

jsp代码:

<div class="layui-form-item">
	  	  <div class="layui-btn-group">
  			<button class="layui-btn layui-btn-small" type="button" οnclick="addRow()"><i class="layui-icon"></i></button>
  			<button class="layui-btn layui-btn-small layui-btn-danger" type="button"  οnclick="delRow()"><i class="layui-icon"></i></button>
		  </div>
  	  </div>
  	  
  	  <div class="layui-form-item">
  	  	<div class="layui-inline"  id="clonerow">
	  	  	<div class="layui-input-inline">
	  	  	<select name="city" lay-verify="required">
		        <option value="">选择责任人</option>
		        <option value="0">北京</option>
		        <option value="1">上海</option>
		     </select>
	  	  	</div>
		     <div class="layui-input-inline">
		     <input οnclick="writereq(this)" type="text" lay-verify="required" class="layui-input">
		     </div>
   			<label class="layui-form-label">开始时间</label>
   			<div class="layui-input-inline">
     		<input type="text" class="layui-input" id="start0" lay-verify="required">
   			</div>
    	
   			<label class="layui-form-label">结束时间</label>
   			<div class="layui-input-inline">
     		<input type="text" class="layui-input" id="end0" lay-verify="required">
   			</div>
    		
	    </div>
	  </div>
js代码:

function addRow(){
	i++;
	var obj=document.getElementById("clonerow");
	var clonenode=obj.cloneNode(true);
	clonenode.id="clonerow"+i;
	obj.parentNode.appendChild(clonenode);
	var obj1=document.getElementById("clonerow"+i);
	var objinput=obj1.getElementsByTagName("input");
	objinput[2].id="start"+i;
	objinput[3].id="end"+i;
	console.log($("input#start"+i).attr("lay-key",i*2+3+""));
	console.log($("input#end"+i).attr("lay-key",i*2+4+""));
	
}
function delRow(){
		
	var obj=document.getElementById("clonerow");
	if(obj.parentNode.childNodes.length>3){
		var objlastnode=obj.parentNode.lastChild;
		console.log(objlastnode);
		console.log("del"+i);
		obj.parentNode.removeChild(objlastnode);
		
		console.log(obj.parentNode.childNodes.length);
	}else{
		layer.msg("删除失败");
	}
	
}


说明:里面有很多layui单词,这是我使用的一个前端框架,还不错,你们可以搜一下试试。


















©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值