JS动态生成表格
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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// 先去准备好表格的数据
38var 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 }]
56var tbody = document.querySelector('tbody');
57for (var i = 0;i<dates.length;i++){
58var tr = document.createElement('tr');
59 tbody.appendChild(tr);
60for(var k in dates[i]){//⾥⾯的for循环 td
61//创建单元格
62var 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⽣成的表格
通过数组动态添加。