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 ????//将数组的长度循环一遍，确定tr29 ????for(var i = 0; i < UArr.length; i++){30 ????????//每循环一次，添加一个tr标签31 ????????var trObj = document.createElement(‘tr‘);32 ????????//将数组每个元素的长度循环一遍，确定td33 ????????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添加进td51 ????????tdObj.appendChild(buttObj);52 ????????//在td中添加一个删除按钮53 ????????var buttObj = document.createElement(‘button‘);54 ????????buttObj.innerHTML = ‘删除‘;55 ????????//添加点击删除事件:用set时需要传值56 ????????//buttObj.setAttribute(‘onClick‘,‘delTr(this)‘);57 ????????//用add时可直接使用this58 ????????buttObj.addEventListener(‘click‘,delTr);59 ????????//将butt添加进td60 ????????tdObj.appendChild(buttObj);61 ????????//将td添加进tr62 ????????trObj.appendChild(tdObj);63 ????????//将tr添加进table64 ????????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添加做够的td74 ????for(var i = 0; i < 5; i++){75 ????????//添加一个td76 ????????var tdObj = document.createElement(‘td‘);77 ????????//给td添加内容78 ????????tdObj.innerHTML = ‘ ‘;79 ????????//将td添加进tr80 ????????trObj.appendChild(tdObj);81 ????}82 ????//将tr添加进table83 ????table2.appendChild(trObj);84 }85 //删除本行86 function delTr(){87 ????//删除本按钮的上一级td的上一级tr88 ????this.parentElement.parentElement.remove();89 }