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

 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 }