html动态生成表格 具体要求如下1使用数组模拟出数据,姓名科目成绩2动态创建行和单元格;3为单元格填充数据4提供“删除”链接,可删除所在的行。
时间: 2024-04-03 14:36:47 浏览: 18
好的,这是一个比较常见的需求,以下是一个简单的代码示例,可以实现你的要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成表格</title>
</head>
<body>
<table id="scoreTable">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button onclick="addRow()">添加行</button>
<script>
// 使用数组模拟数据
const data = [
{ name: '张三', subject: '语文', score: 80 },
{ name: '张三', subject: '数学', score: 90 },
{ name: '李四', subject: '语文', score: 75 },
{ name: '李四', subject: '数学', score: 85 },
];
// 获取表格的 tbody 元素
const tbody = document.querySelector('#scoreTable tbody');
// 生成表格行的函数
function createRow(item) {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.subject}</td>
<td>${item.score}</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
`;
return tr;
}
// 初始化表格
data.forEach(item => {
const tr = createRow(item);
tbody.appendChild(tr);
});
// 添加行的函数
function addRow() {
const item = { name: '新人', subject: '英语', score: 70 };
const tr = createRow(item);
tbody.appendChild(tr);
}
// 删除行的函数
function deleteRow(link) {
const tr = link.parentNode.parentNode;
tbody.removeChild(tr);
}
</script>
</body>
</html>
```
这个示例中,我们先使用一个数组模拟了一些数据,并在页面加载时将数据渲染为表格。然后,我们提供了一个按钮,点击按钮就可以添加一行新的数据。同时,每行的最后一列提供了一个“删除”链接,点击链接就可以删除对应的行。注意,在删除行的时候,我们通过 `link.parentNode.parentNode` 来获取当前行的元素,再通过 `tbody.removeChild(tr)` 来删除这个元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)