1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4<meta charset="UTF-8"> 5<title>动态表格</title> 6<style> 7 table {8 width: 500px; 9 margin: 50px auto; 10 border: 1px solid #000; 11 border-collapse: collapse; 12 } 13 14 thead {15 text-align: center; 16 } 17 18 table tr {19 height: 40px; 20 background-color: orange; 21 } 22 23 table td {24 border: 1px solid #000; 25 } 26 27 tbody td {28 padding: 0 10px; 29 } 30 31 table a {32 float: right; 33 } 34</style> 35 </head> 36 <body> 37 38 <table cellpadding="0" cellspacing="0"> 39<thead> 40<tr> 41 <td>姓名</td> 42 <td>类别</td> 43 <td>分数</td> 44 <td>操作</td> 45</tr> 46</thead> 47<tbody></tbody> 48 </table> 49 <script> 50// 动态生成表格 51// 思想：利用数组的长度来创建表格的行数 52//利用数组内对象的属性长度来创建列 创建列的同时进行赋值 53var dates = [ 54 { 55 name: '张飒', 56 type: 'javascript', 57 score: 90 58 }, { 59 name: '李四', 60 type: 'javascript', 61 score: 80 62 }, { 63 name: "王二", 64 type: 'java', 65 score: 98 66 }, { 67 name: "王二", 68 type: 'java', 69 score: 98 70 } 71]; 72var tbodys = document.querySelector('tbody'); 73// 根据dates.length 创建tr 74for (var i = 0; i < dates.length; i++) { 75 // 创建 tr 元素 76 var trs = document.createElement('tr'); 77 // 添加元素到tbody 内部 78 tbodys.appendChild(trs); 79 // 根据dates[i] 对象的属性长度来创建 td 80 for (var k in dates[i]) { 81 // 创建 td 元素 82 var tds = document.createElement("td"); 83 // 将对象的值赋值给td 元素 84 tds.innerHTML = dates[i][k]; 85 // 将td 添加到 tr 内 86 trs.appendChild(tds); 87 } 88 // 创建操作 单元格 89 var td = document.createElement('td'); 90 // 给操作单元格 添加内容 91 td.innerHTML = '<a href="javascript:;">删除</a>'; 92 trs.appendChild(td); 93} 94// 获取所有 a 元素 95var as = document.querySelectorAll('a'); 96// 循环 注册点击事件; 97for (var j = 0; j < as.length; j++) { 98 as[j].onclick = function () { 99 tbodys.removeChild(this.parentNode.parentNode); //移除a 元素的爷爷即：当前a 所在的tr100 }101}102 </script>103 </body>104 </html>
