0417 js节点操作表格（添加删除）

Posted 2020-10-31 Aifeiff

节点创建和追加

　　节点创建

　　　　元素节点：document.createElement(tag标签名称);

　　　　文本节点：document.createTextNode(文本内容);

　　　　属性设置：node.setAttribute(名称，值);

　　节点追加：

　　　　父节点.appendChild(子节点);

　　　　父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

　　　　父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点复制操作

　　被复制节点.cloneNode(true/false);

　　true:深层复制 （本身和内层子节点都复制）

　　false:浅层复制 （本身包括属性复制）

　　<div id=”apple”>hello</div>

节点删除

　　　节点.remove();

　　　父节点.removeChild(子节点);

节点操作表格（添加、删除）

 1 <!--html代码部分-->
 2 <table id="table1" border="1" style="border-spacing: 0">
 3     <tr>
 4         <th>编号</th>
 5         <th>年级</th>
 6         <th>姓名</th>
 7         <th>性别</th>
 8         <th>操作</th>
 9     </tr>
10 </table>
11 /*js代码部分*/
12 window.onload = function(){
13     //定义一个有数据的数组
14     var useArr = [
15         [1,"王保利","男","10"],
16         [2,"向兆泽","男","11"],
17         [3,"李清坤","男","12"],
18         [4,"陈鹏","男","33"]
19     ];
20     //将数据添加进表格
21     xsTable(useArr);
22 }
23 //将数组中的内容在表格中显示出来
24 function xsTable(UArr){
25     //找到要操作的表格
26     var tableX = document.getElementById(‘table1‘);
27     console.log(tableX);
28     //将数组的长度循环一遍，确定tr
29     for(var i = 0; i < UArr.length; i++){
30         //每循环一次，添加一个tr标签
31         var trObj = document.createElement(‘tr‘);
32         //将数组每个元素的长度循环一遍，确定td
33         for(var j = 0; j < UArr[i].length; j++){
34             //每循环一次，添加一个td标签
35             var tdObj = document.createElement(‘td‘);
36             //给td赋值
37             tdObj.innerHTML = UArr[i][j];
38             //将td放到对应的tr里
39             trObj.appendChild(tdObj);
40         }
41         //添加数组中没有的数据（修改、删除）
42         var tdObj = document.createElement(‘td‘);
43 //        会多显示一个空的按钮
44 //        tdObj.innerHTML = ‘<button id="a">修改<button/>‘;
45 //        trObj.appendChild(tdObj);
46 //        tableX.appendChild(trObj);
47         //在td中添加一个修改按钮；
48         var buttObj = document.createElement(‘button‘);
49         buttObj.innerHTML = ‘修改‘;
50         //将butt添加进td
51         tdObj.appendChild(buttObj);
52         //在td中添加一个删除按钮
53         var buttObj = document.createElement(‘button‘);
54         buttObj.innerHTML = ‘删除‘;
55         //添加点击删除事件:用set时需要传值
56         //buttObj.setAttribute(‘onClick‘,‘delTr(this)‘);
57         //用add时可直接使用this
58         buttObj.addEventListener(‘click‘,delTr);
59         //将butt添加进td
60         tdObj.appendChild(buttObj);
61         //将td添加进tr
62         trObj.appendChild(tdObj);
63         //将tr添加进table
64         tableX.appendChild(trObj);
65     }
66 }
67 //添加一行
68 function addTr(){
69     //找到要操作的表格
70     var table2 = document.getElementById(‘table1‘);
71     //添加一行
72     var trObj = document.createElement(‘tr‘);
73     //通过循环为tr添加做够的td
74     for(var i = 0; i < 5; i++){
75         //添加一个td
76         var tdObj = document.createElement(‘td‘);
77         //给td添加内容
78         tdObj.innerHTML = ‘ ‘;
79         //将td添加进tr
80         trObj.appendChild(tdObj);
81     }
82     //将tr添加进table
83     table2.appendChild(trObj);
84 }
85 //删除本行
86 function delTr(){
87     //删除本按钮的上一级td的上一级tr
88     this.parentElement.parentElement.remove();
89 }

js节点操作表格（添加、删除）--代码示例