示例: js编程实现表格显示

113 阅读 0 评论 75 点赞

我是靠谱客的博主花痴大门，这篇文章主要介绍示例: js编程实现表格显示，现在分享给大家，希望可以做个参考。

示例: js编程实现表格显示
1. 静态表格
2. javscript代码显示静态表格
3. 学生数据与表格关联

复制代码

1
2
3
4
5

1. 首先要定义一个空的字符串，然后空的字符串加上需要循环的中间部分
2. 然后头+中间+尾
var str = '<table>' + trStr + '</table>'

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var students = [
{ number: '学号', name: '姓名', score: '分数', gender: '性别' },
{ number: 1001, name: 'jack', score: 98, gender: '男' },
{ number: 1002, name: 'rose', score: 95, gender: '女' },
{ number: 1003, name: '小丽', score: 85, gender: '女' },
{ number: 1004, name: 'tom', score: 88, gender: '男' },
]
var trStr = ''
students.forEach(function (item) {
trStr = trStr + `<tr>
<td>${item.number}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.gender}</td>
</tr> `
})
var str = '<table>' + trStr + '</table>'
document.write(str)