JS动态生成表格

核心思想

1、因为里面的学生数据都是动态的，所以需要JS动态生成，模拟数据，定义好数据。数据采取对象形式存储

2、在tbody 里面创建行，通过数组的长度创建行，行里面的单元格数量取决于每个对象里面的属性个数；

嵌套的for循环，外面的for循环指定行，里面的for循环作用列；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动态生成表格</title>
 6     <style>
 7     table{
 8     width:100%;
 9                 /*background: #bbb;*/
10                 text-align:center;
11     }
12       table tr{
13                 height:30px;
14                 background-color: #fff;
15               }
16               table tr:nth-child(1){
17                 font-weight: bold;
18                 /*background-color:#ccc;*/
19               }
20     </style>
21 </head>
22 <body>
23     <table>
24         <thead>
25             <tr>
26                 <td>序号</td>
27                 <td>单词</td>
28                 <td>释义</td>
29                 <td>个数</td>
30             </tr>
31         </thead>
32         <tbody>
33             
34         </tbody>    
35     </table>
36     <script>
37     // 先去准备好表格的数据
38     var dates = [{
39         number:1,
40         word :'body',
41         translate:'主体',
42         sum:'4'
43 
44     },{
45         number:2,
46         word :'document',
47         translate:'文档',
48         sum:'8'
49     },{
50         number:3,
51         word :'object',
52         translate:'对象',
53         sum:'6'
54 
55     }]
56      var tbody = document.querySelector('tbody');
57      for (var i = 0;i<dates.length;i++){
58          var tr = document.createElement('tr');
59          tbody.appendChild(tr);
60          for(var k in dates[i]){//里面的for循环 td
61              //创建单元格
62              var td = document.createElement('td');
63              //把对象里面的属性值，给td
64              td.innerHTML = dates[i][k];
65              tr.appendChild(td);
66          }
67      }
68 </script>
69 </body>
70 </html>

显示效果：

HTML生成的表格

通过数组动态添加

猜你喜欢