js 操作表格-删除行

最新推荐文章于 2022-12-19 14:37:03 发布

神奇大叔

最新推荐文章于 2022-12-19 14:37:03 发布

阅读量1.6k

点赞数 1

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102964072

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

表格删除行

	表格删除行不适用父对象.removeChild()方法
	表格对象.deleteRow(行对象);  不论行对象是谁，都只会删除表格第一行
	
	**正确做法**
		表格对象.deleteRow(索引);  0表示第一行，1表示第二行
				function delRow()
			{
				var ta=document.getElementById("ta");
				ta.deleteRow(1);
			}
		表格对象.deleteRow(行对象.rowIndex);  行索引
				function delRow()
			{
				var ta=document.getElementById("ta");
				var tr=document.getElementById("t1");
				ta.deleteRow(tr.rowIndex);
			}
			
			
	**动态删除行**
		this配合往上父节点.deleteRow(行对象.rowIndex)删除
			function delRow(btn)
			{
				var ta=document.getElementById("ta");
				var tr=btn.parentNode.parentNode;
				ta.deleteRow(tr.rowIndex);
			}

<html>
	<head>
		<title>js 操作表格</title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			function delRow(btn)
			{
				var ta=document.getElementById("ta");
				var tr=btn.parentNode.parentNode;
				ta.deleteRow(tr.rowIndex);
			}
		</script>
		<style type="text/css">
			#ta{
				margin:auto;
			}
			
			#ta tr{
				height:35px;

			}
			
			
		</style>
	</head>
	<body>
		<hr />
		<table border="1px" id="ta">
			<tr style="text-align: center; font-weight: bold;">
				<td width="200px">书名</td>
				<td width="100px">作者</td>
				<td width="100px">价格</td>
				<td width="100px">购买数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr  id="t1">
				<td>java</td>
				<td>我</td>
				<td>40.0</td>
				<td>3</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
				</td>
			</tr>
			<tr >
				<td>js</td>
				<td>gg</td>
				<td>77.60</td>
				<td>2</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" />
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>
			<tr>
				<td>Spring入门</td>
				<td>mm</td>
				<td>78.88</td>
				<td>300</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" />
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>
		</table>
	</body>
</html>

神奇大叔

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js 操作表格-删除行

表格删除行表格删除行不适用父对象.removeChild()方法表格对象.deleteRow(行对象); 不论行对象是谁，都只会删除表格第一行 **正确做法** 表格对象.deleteRow(索引); 0表示第一行，1表示第二行 function delRow() { var ta=document.getElementById("ta"); ...
复制链接

扫一扫