html js删除table的子节点删除tr标签删除td标签删除表格子节点

最新推荐文章于 2023-03-13 19:19:43 发布

原创最新推荐文章于 2023-03-13 19:19:43 发布 · 2.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

大数据

当前文章被收录于：

大数据

30 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何使用HTML和JavaScript实现在网页表格中删除记录的功能，通过点击删除链接触发删除操作，展示了JavaScript获取并删除指定行的代码示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">

	</script>
	</head>
	<body>
			<table border="1" id="tb">
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>班级</th>
					<th>电话</th>
					<th>操作</th>
				</tr>
				<tr>              
					<td>小黄</td>
					<td>男</td>
					<td>25</td>
					<td>计算机1班</td>
					<td>12111111111</td>
					<td><a href="#" onclick="del(this)">删除</a></td>
				</tr>
				<tr>
					<td>李四</td>
					<td>女</td>
					<td>14</td>
					<td>计算机二班</td>
					<td>13212112111</td>
					<td><a href="#">删除</a></td>
				</tr>
				
			</table>
			<script type="text/javascript">
				function del(obj){
					console.log(obj.parentNode.parentNode.textContent)
					//取到当前的对象让他返回父节点    因为他在td标签中所以要返回两次
				var tr =obj.parentNode.parentNode //取到了tr对象
	
				tr.parentNode.removeChild(tr) //返回上一层的table删除 他的子节点
			}
			</script>
	</body>
</html>