问题引入
如果我们在写程序的时候，接收到了后台传入的数据，怎么样用原生JavaScript把数据写入表格呢？
如果第二次传来的数据与第一次不一样的话该怎么办呢？
问题解决
我们可以将传过来的数据遍历，然后拼接字符串。
然后可以使用document.querySelector(“.id”).innerHTML = 字符串；的形式，将字符串写入表格。
代码实现（因为现在没办法模拟后台传数据，现在以字符串模拟数据）：
1.初始工作：写一个表格，将tbody设置一个标识，以便下面我们可以获取到。
<table border="1">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>email</td>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
2.完整代码
<!DOCTYPE html>
<html>
<head>
<title>小腾</title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>email</td>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
<script>
/**
* 模拟数据
*/
var str = [{
"age": 21,
"email": "小岳@163.com",
"id": 1,
"name": "小岳",
"sex": "男"
}, {
"age": 18,
"email": "xiaowang@163.com",
"id": 2,
"name": "小王",
"sex": "女"
}, {
"age": 20,
"email": "xiaolu@qq.com",
"id": 3,
"name": "小路",
"sex": "男"
}, {
"age": 21,
"email": "xiaoteng@gmail.com",
"id": 4,
"name": "小腾",
"sex": "男"
}];
var html = "";
for (var i = 0; i < str.length; i++) {
//拼接字符串，把所有的值都拼接上
html += "<tr>" + "<td>" + str[i].id + "</td>" + "<td>" + str[i].name + "</td>" + "<td>" + str[i].sex +
"</td>" + "<td>" + str[i].age + "</td>" + "<td>" + str[i].email + "</td>" + "</tr>"
}
//将数据写入刚才的表格中
document.querySelector(".tbody").innerHTML = html;
</script>
</body>
</html>
运行图：
小结
方法有很多种，本次只是介绍其中一种，如果还有遇到类似问题会再写一个。
本文含有隐藏内容，请 开通VIP 后查看