原生js实现可添加、删除的行
前端萌新学习笔记,不喜勿喷。
首先你需要一个乘放可编辑行的容器,可能它长下面这样,也可能不长这样
<div class="container"></div>
初始化方法时需要给容器添加一行
function init(){
//获取容器dom节点,添加行
}
init();
新增一行时,需要向点击的span的父元素后添加一行,但是原生js只有insertBefore(新节点,插入节点),当然jquery有insertAfter方法
- w3c对此方法的描述如下:insertBefore() 方法可在已有的子节点前插入一个新的子节点。此方法可返回新的子节点。
一般情况下,插入的节点如果有多层嵌套或者子元素过多,通过createElement等方法创建是比较繁琐的,而insertBefore方法并不能直接将拼接的html字符串解析为dom元素插入,所以需要用到另一个方法Range.createContextualFragment(),此方法可以将拼接的html字符串转换成文档片段。
- MDN 对此方法描述如下:Range.createContextualFragment() 该方法通过调用HTML片段解析算法或XML片段解析算法返回一个文档片段 DocumentFragment 。链接地址
function addRow(ele){
let str=`<div style="margin-bottom: 5px">
<span style="display: inline-block;width: 80px">内部字段名:</span>
<div style="width: 200px;display: inline-block">
<input class="form-control" value="" />
</div>
<span style="display: inline-block;width: 80px">映射字段名:</span>
<div style="width: 200px;display: inline-block">
<input class="form-control" value="" />
</div>
<div style="display: inline-block;width: 20px" οnclick="delRow(this)">
<img class="ss-strgy-operate-img" src="/win/images/delete-rule.png">
</div>
<div style="display: inline-block;width: 20px" οnclick="addRow(this)">
<img class="ss-strgy-operate-img" src="/win/images/rule-add.png">
</div>
</div>`
let range=document.createRange()
let documentFragment =range.createContextualFragment(str);//创建需要插入的文档片段
if(ele.parentNode.parentNode.lastChild===ele.parentNode){//当点击节点父节点为最后一个时只需使用append方法在最后追加
ele.parentNode.parentNode.append(documentFragment )
}else{//不是最后一个时在下一个节点之前插入
ele.parentNode.parentNode.insertBefore(documentFragment,ele.parentNode.nextSibling)
}
},
删除行时,只需通过点击的div传入的this找到父元素,也就是要删除的那一行,从父元素的父元素中remove掉父元素即实现了删除当前行的功能。
function delRow(ele){
ele.parentNode.parentNode.removeChild(ele.parentNode);
},
效果如下图