微信公众号:前端程序猿之路
关注可了解更多的前端知识,反馈问题或建议,请公众号留言。
如果你觉得公众号内容对你有帮助,欢迎关注并转载
动态增行删行操作
如下图所示,默认只展示一行,右侧有删除和添加按钮,点击删除删除当前行,点击添加在当前行下面添加新的一行
默认:
添加两行以后:
删除一行以后
主要是通过id拿到整体的div,在div后面进行添加
代码如下:
html
<div class="layui-form-item dividingLine">
<label class="layui-form-label dividingSpan">汇总表头区域</label>
<div class="sheetLabel" style="margin-left: 108px">
<div class="sheetLabel1" id="sheet">
<span style="margin-bottom: 16px;display: inline-block;">sheet1</span>
<input type="text" name="title" required="" lay-verify="required" placeholder="A1" autocomplete="off" class="layui-input sheetInput">
<span>:</span>
<input type="text" name="title" required="" lay-verify="required" placeholder="F3" autocomplete="off" class="layui-input sheetInput">
<img id="close" class="fileClose" src="../image/fileClose.png" onclick="removeSheet(this)"/>
<img id="add" class="fileAdd" src="../image/fileadd.png" onclick="addSheet(this)"/>
</div>
</div>
</div>
js:
var Identification =1;
function addSheet(val){
var rootEle = val.parentElement;
var rootId = document.getElementById(rootEle.id);
var newSheet=document.createElement("div");
newSheet.class= "layui-input-block";
newSheet.id = "college"+ Identification;
//拿到删除按钮的id并加1
var deletename=rootId.childNodes[9].id+1;
//将现有的divhtml赋值给新创建的div
newSheet.innerHTML=rootId.innerHTML;
document.getElementsByClassName("sheetLabel")[0].appendChild(newSheet);
//给新的div的删除按钮赋值(动态加1)
newSheet.childNodes[9].id=deletename;
Identification++;
}
function removeSheet(val){
//获取本删除按钮的id值,并创建对象
var strid = val.id;
var content = document.getElementById(strid);
var rootContent = content.parentElement;
//找到这个删除按钮对应的父div的值
var rootId = rootContent.id;
//判断本id对应的值并删除
var root = document.getElementById(rootId);
if (root != null){
root.parentNode.removeChild(root);
}
}
参考链接:https://blog.csdn.net/cfl20121314/article/details/17092615