完善上面的代码1、在每一行末尾添加一个删除按钮,使其点击后能够删除表单当前的一行。2、在表头添加全部删除按钮,点击能够删除表单内的内容。
时间: 2024-03-12 11:49:38 浏览: 66
好的,我可以为您提供实现这两个功能的代码。
首先,让我们在每一行末尾添加一个删除按钮。我们可以在每一行的最后一个单元格中添加一个按钮,并为其添加一个点击事件来实现删除行的功能。具体的实现代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Delete Rows</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>john.doe@example.com</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>jane.smith@example.com</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
</tbody>
</table>
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
```
接下来,我们需要在表头添加一个全部删除按钮。我们可以在表头的最后一个单元格中添加一个按钮,并为其添加一个点击事件来实现删除所有行的功能。具体的实现代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Delete Rows</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>john.doe@example.com</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>jane.smith@example.com</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<button onclick="deleteAllRows()">Delete All Rows</button>
</td>
</tr>
</tfoot>
</table>
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function deleteAllRows() {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
for (var i = rowCount - 1; i > 0; i--) {
table.deleteRow(i);
}
}
</script>
</body>
</html>
```
这样,我们就实现了在每一行末尾添加一个删除按钮和在表头添加一个全部删除按钮的功能。
阅读全文