好的，我可以为你提供一个简单的
动态生成表格的
案例。这个
案例使用了 HTML、CSS 和
JavaScript，并使用了一个数组来模拟学生数据。
首先，我们需要一个 HTML 页面，包含一个空的
表格和一个按钮，点击按钮可以
动态地添加
表格行。这里是一个基本的 HTML 结构：
```html
<!DOCTYPE html>
<html>
<head>
<title>
动态生成表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
button {
margin-bottom: 16px;
}
</style>
</head>
<body>
<button id="add-row">添加行</button>
<table id="students">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
```
在
表格中，我们定义了三个列，分别是“姓名”、“年龄”和“性别”。tbody 元素是空的，我们将使用
JavaScript 动态地向其中添加
表格行。注意，我们还添加了一些 CSS 样式，使
表格看起来更美观。
接下来，我们需要在
JavaScript 中编写代码来
生成表格行。首先，我们可以使用一个数组来模拟学生数据，例如：
```js
const students = [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 19, gender: '女' },
{ name: '王五', age: 20, gender: '男' },
{ name: '赵六', age: 21, gender: '女' },
];
```
然后，我们可以编写一个函数，这个函数将遍历学生数组，并为每个学生创建一个
表格行。这里是一个简单的实现：
```js
function renderTable() {
const tbody = document.querySelector('#students tbody');
tbody.innerHTML = '';
for (const student of students) {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.gender}</td>
`;
tbody.appendChild(tr);
}
}
```
这个函数首先获取
表格的 tbody 元素，并清空其中的所有内容。然后，它遍历学生数组，并为每个学生创建一个新的
表格行。最后，它将这些行添加到 tbody 元素中。
现在，我们只需要将这个函数与按钮的点击事件绑定起来，就可以在用户点击按钮时
动态地
生成表格行了。这里是一个完整的
JavaScript 代码：
```js
const students = [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 19, gender: '女' },
{ name: '王五', age: 20, gender: '男' },
{ name: '赵六', age: 21, gender: '女' },
];
function renderTable() {
const tbody = document.querySelector('#students tbody');
tbody.innerHTML = '';
for (const student of students) {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.gender}</td>
`;
tbody.appendChild(tr);
}
}
const addButton = document.querySelector('#add-row');
addButton.addEventListener('click', renderTable);
```
现在，当用户点击“添加行”按钮时，就会
生成一个包含所有学生数据的
表格。当我们需要添加或修改学生数据时，只需要更新 students 数组即可。
最低0.47元/天 解锁文章
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
