html动态生成表格 具体要求如下1使用数组模拟数据2动态创建行和单元格;3为单元格填充数据4提供“删除”链接,可删除所在的行。
时间: 2024-04-04 20:29:27 浏览: 35
好的,下面是一个实现上述要求的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态生成表格</title>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
.delete-link {
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<button id="addRow">添加行</button>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 初始行为空 -->
</tbody>
</table>
<script>
const data = [
{ name: 'Tom', age: 23 },
{ name: 'Jerry', age: 25 },
{ name: 'Bob', age: 21 }
];
const table = document.getElementById('myTable');
const tbody = table.querySelector('tbody');
// 初始化表格
data.forEach(item => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
td1.textContent = item.name;
const td2 = document.createElement('td');
td2.textContent = item.age;
const td3 = document.createElement('td');
const deleteLink = document.createElement('a');
deleteLink.href = 'javascript:void(0)';
deleteLink.className = 'delete-link';
deleteLink.textContent = '删除';
deleteLink.addEventListener('click', () => {
tr.remove();
});
td3.appendChild(deleteLink);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
});
// 添加行的按钮点击事件
const addRowBtn = document.getElementById('addRow');
addRowBtn.addEventListener('click', () => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const input1 = document.createElement('input');
input1.type = 'text';
td1.appendChild(input1);
const td2 = document.createElement('td');
const input2 = document.createElement('input');
input2.type = 'number';
td2.appendChild(input2);
const td3 = document.createElement('td');
const deleteLink = document.createElement('a');
deleteLink.href = 'javascript:void(0)';
deleteLink.className = 'delete-link';
deleteLink.textContent = '删除';
deleteLink.addEventListener('click', () => {
tr.remove();
});
td3.appendChild(deleteLink);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
});
</script>
</body>
</html>
```
以上代码中,首先定义了一个数组 `data`,用于模拟表格中的数据。然后在 JavaScript 中使用 `forEach` 方法,遍历数组中的每一个元素,动态创建表格的行和单元格,并将数据填充到单元格中。注意每一行的“删除”链接都添加了事件监听器,点击链接后可以删除对应的行。
此外,还添加了一个“添加行”的按钮,点击按钮后可以动态添加一行到表格中。新添加的行中包含两个输入框和一个“删除”链接,同样可以删除当前行。
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)