项目有个功能是要做动态添加责任人,要求以及起至时间。最后的效果如下图:
点击加号按钮就可以添加一行记录,点击删除按钮就可以删除一行。
其实思路很简单,将一行信息用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("删除失败");
}
}