对js中setAttribute（）方法的使用——创建一个有删除方法的表格案例

本文链接：https://blog.csdn.net/qq_45937792/article/details/107470783

对js中setAttribute（）方法的使用——创建一个有删除方法的表格案例

一个像这样的表格点添加能加入数据，删除能删除整行
这里主要讲删除的td标签的添加<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>

首先我们要知道js DOM中的创建元素对象和文本对象的方法：
1.document.createElement();创建元素对象，内为你要加的标签如<a></a> <p></p>
2.document.createTextNode();创建文本对象

当你创建了一个元素对象，要添加属性时可以用到setAttribute()方法
setAttribute(参数1，参数2); --给某个元素设置某个属性，
参数1：属性名参数2：属性值

用法
先创建一个元素对象给a，
var a=document.createElement()
再添加属性
a.setAttribute();

添加前面编号的后面姓名性别大同小异，只要记得将其他的td标签放入同一个tr中。

<script>
    //绑定点击事件
document.getElementById("btn_add").onclick=function (ev) {
    //获取编号值
    var id=document.getElementById("id").value;
    //创建一个文本节点
    var text = document.createTextNode(id);
    //创建一个td元素对象
    var td1 = document.createElement("td");
    //创建一个tr元素对象
    var tr1 = document.createElement("tr");
    //将text放进td中，td放进tr中，tr放进table中
    td1.appendChild(text);
    tr1.appendChild(td1);
 var table = document.getElementById("table");
    table.appendChild(tr1);
}
</script>

删除的创建


    var del = "删除";
    var text4 = document.createTextNode(del);//创建文本对象
    var td4 = document.createElement("td");//创建td元素对象
    var a=document.createElement("a")//创建a元素对象<a></a>
    //给a添加属性
    a.setAttribute("href","javascript:void(0)");
    a.setAttribute("onclick","del(this)")
     //放入
    a.appendChild(text4);
    td4.appendChild(a);
    tr1.appendChild(td4);

删除方法del（this）

function del(obj) {
    var table=obj.parentNode.parentNode.parentNode;
    var tr=obj.parentNode.parentNode;
    table.removeChild(tr);
}