核心思想
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生成的表格
通过数组动态添加
原文：https://www.cnblogs.com/nyw1983/p/11878014.html