如何在web页面上删除一行数据

最新推荐文章于 2023-02-24 13:28:51 发布

沈以诚

最新推荐文章于 2023-02-24 13:28:51 发布

阅读量3.8k

点赞数 5

分类专栏：个人经验文章标签：前端

本文链接：https://blog.csdn.net/qq_36695156/article/details/97935185

版权

个人经验专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果大概就是这样：

主要代码：

<script type="text/javascript">
	function deleteRow(link) {        
		var x = confirm("确认删除吗？")                //弹出确认删除弹窗
		if(!x)     //确认删除就是true  取消就是false  这里是取反，所以当取消的时候，就直接返回
			return;

		var table = document.getElementById("heroTable");    //先得到这个表格
		var td = link.parentNode;        //先从删除按钮取到的父节点   向上取到td
		var tr = td.parentNode;          //再取td的父节点     向上取到tr，也就是定位到这一行
		var index = tr.rowIndex;         //在得到这一行的序列
		table.deleteRow(index);         //再在这个表格删除这个序列
	}
	
</script>

全部代码：

<!DOCTYPE html>
<html>
<head>
	<title>删除元素</title>
</head>
<body>
	<table width="100%" border = "1" cellspacing="0" id="heroTable">  //设置一个id表示符

		<tr>
			<td width="50%"> 英雄名称</td>
			<td>操作</td>
		</tr>

		<tr>
			<td>盖伦</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>

		<tr>
			<td>光辉</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>

		<tr>
			<td>冷家豪</td>
			<td>
				<a href="#" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>
		
	</table>

</body>
<script type="text/javascript">
	function deleteRow(link) {        
		var x = confirm("确认删除吗？")                //弹出确认删除弹窗
		if(!x)     //确认删除就是true  取消就是false  这里是取反，所以当取消的时候，就直接返回
			return;

		var table = document.getElementById("heroTable");    //先得到这个表格
		var td = link.parentNode;        //先从删除按钮取到的父节点   向上取到td
		var tr = td.parentNode;          //再取td的父节点     向上取到tr，也就是定位到这一行
		var index = tr.rowIndex;         //在得到这一行的序列
		table.deleteRow(index);         //再在这个表格删除这个序列
	}
	
</script>
</html>

沈以诚

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
如何在web页面上删除一行数据

效果大概就是这样：主要代码：<script type="text/javascript"> function deleteRow(link) { var x = confirm("确认删除吗？") //弹出确认删除弹窗 if(!x) //确认删除就是true 取消就是false 这里是取反，所...
复制链接

扫一扫

专栏目录