<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<!-- 使用 JS 渲染 -->
<!-- <tr>
<td>1</td>
<td>Jack</td>
<td>男</td>
<td>18</td>
<td>2XX</td>
</tr> -->
</tbody>
</table>
<script>
/**
* 需求:
* 1. 接收到后端给到的数据
* 2. 将数据渲染到页面
*/
var users = [
{ id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2XX' },
{ id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2XX' },
{ id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2XX' },
{ id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2XX' },
];
// 获取要操作的标签对象<tbody></tbody>
const oTbody = document.querySelector('tbody');
// 定义一个空字符串 用来存储动态生成的数据库内容
var str = '';
// 循环遍历后端给的数组 获取里面的每一条数据内容
users.forEach(function(value){
// 利用模板字符串向空字符串str中写入每一条数据内容
str += `
<tr>
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.gender}</td>
<td>${value.classRoom}</td>
</tr>
`;
console.log(str);
})
// 像页面中写入内容
// 语法：标签对象.innerHTML = 数据内容;
oTbody.innerHTML = str ;
</script>
</body>
</html>
