核心思想
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生成的表格
通過數組動態添加
