打开“js删除表格行.html”,完成如下效果,点击“删除”后,会把当前表格行删除。(选做) 提示:要删除一个结点的方法为:结点对象名.remove(); this代表的是当前发生事件的结点。获取当前结点的父节点的方法为:结点对象名.parentNode
时间: 2024-03-22 22:38:57 浏览: 31
以下是实现该功能的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>删除表格行</title>
</head>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>2222</td>
<td>2222</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<script>
function deleteRow(link) {
var row = link.parentNode.parentNode;
row.remove();
}
</script>
</body>
</html>
```
在上面的示例中,我们在每个“删除”链接上添加了一个 onclick 事件处理函数 `deleteRow(this)`,这里的 `this` 表示当前点击的链接元素。在 `deleteRow` 函数中,首先获取到当前行的元素,方法是通过链接元素的父节点获取其所在的行元素,然后调用 `remove()` 方法将其从 DOM 树中移除。