写一段html代码,完成如下效果,点击“删除”后,会把当前表格行删除。 提示:要删除一个结点的方法为:结点对象名.remove(); this代表的是当前发生事件的结点。获取当前结点的父节点的方法为:结点对象名.parentNode
时间: 2024-02-17 14:04:34 浏览: 27
好的,以下是一个简单的HTML代码示例,可以实现删除表格行的功能:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Delete Table Row with HTML</title>
</head>
<body>
<h2>Delete Table Row with HTML</h2>
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Bob Smith</td>
<td>40</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个简单的表格,并为每行添加了一个“删除”按钮。当点击这个按钮时,会调用名为“deleteRow”的JavaScript函数。这个函数获取按钮所在的表格行,然后通过父节点的removeChild方法删除该行。注意,我们在按钮的HTML代码中使用了“this”关键字,这样就可以将按钮本身作为参数传递给JavaScript函数,从而获取到按钮所在的行。
相关推荐
![](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)