javascript创建动态表格

  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     //      利用数组内对象的属性长度来创建列 创建列的同时进行赋值  
 53     var 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     ];
 72     var tbodys = document.querySelector('tbody');
 73     // 根据dates.length 创建tr
 74     for (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 元素
 95     var as = document.querySelectorAll('a');
 96     // 循环 注册点击事件;
 97     for (var j = 0; j < as.length; j++) {
 98         as[j].onclick = function () {
 99             tbodys.removeChild(this.parentNode.parentNode); //移除a 元素的爷爷即：当前a 所在的tr
100         }
101     }
102 </script>
103 </body>
104 </html>
javascript创建动态表格

猜你喜欢
