用html写一个表单;在表单后添加一个“全部删除”按钮,要求点击后能删除表单内的所有行。
时间: 2024-03-20 09:39:02 浏览: 67
好的,以下是一个简单的HTML表单和全部删除按钮的实现:
```html
<form>
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td><input type="text" name="name"></td>
<td><input type="email" name="email"></td>
<td><input type="tel" name="phone"></td>
</tr>
<tr>
<td><input type="text" name="name"></td>
<td><input type="email" name="email"></td>
<td><input type="tel" name="phone"></td>
</tr>
</table>
<br>
<button type="button" onclick="deleteRows()">全部删除</button>
</form>
<script>
function deleteRows() {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
//从底部开始删除行
for (var i = rowCount - 1; i > 0; i--) {
table.deleteRow(i);
}
}
</script>
```
这个表单包含一个包含数据的表格和一个全局删除按钮。当用户单击“全部删除”按钮时,它将调用JavaScript函数`deleteRows()`,该函数将从底部开始循环表格中的每一行,并使用`table.deleteRow(i)`方法删除该行。请注意,我们从底部开始循环以避免在从顶部开始删除时出现索引错误。
阅读全文