完成动态生成表格案例, 使用数组把学生数据模拟出来
时间: 2024-04-06 21:28:08 浏览: 19
好的,我可以为你提供一个简单的动态生成表格的案例。这个案例使用了 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 数组即可。