Javascript 删除tr 元素

最新推荐文章于 2023-01-05 17:01:25 发布

原创最新推荐文章于 2023-01-05 17:01:25 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JAVASCRIPT 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了三种不同的方法来操作HTML表格中的行：使用纯JavaScript删除行、使用jQuery删除行以及仅隐藏行而不真正删除。这些方法分别展示了如何通过DOM操作实现对网页上表格数据的有效管理。

Javascript

               
               function delete1(obj){
			var tr=obj.parentNode.parentNode;
	    	var tbody=tr.parentNode;
	    	tbody.removeChild(tr);
		}
		//使用Jquery 删除
		function delete2(obj){
			$(obj).parent().parent().parent()[0].removeChild($(obj).parent().parent()[0]);
		}
		//该方式只是将TR 元素隐藏
		function hide(obj){
			$(obj).parent().parent().hide();
		}

HTML

<table>
		<tbody>
			<tr>
				<td>xxx1</td>
				<td><span onclick="delete1(this)">删除</span></td>
			</tr>
			<tr>
				<td>xxx1</td>
				<td><span onclick="delete2(this)">删除</span></td>
			</tr>
			<tr>
				<td>xxx1</td>
				<td><span onclick="hide(this)">隐藏</span></td>
			</tr>
		</tbody>
	</table>