揭秘jQuery轻松删除表格中所有TR的神奇技巧

Feb 23, 2026

—

在网页开发中，有时候我们需要删除表格中的所有行（TR元素）。使用原生JavaScript可以完成这个任务，但使用jQuery可以让这个过程变得更加简洁和高效。本文将介绍如何使用jQuery轻松删除表格中所有TR元素。
一、背景知识
在HTML中，表格由

标签创建，行由

标签创建，单元格由

或

标签创建。jQuery是一个快速、小型且功能丰富的JavaScript库，它使得HTML文档的遍历和操作变得简单。
二、使用jQuery删除所有TR元素
要删除表格中所有TR元素，我们可以使用jQuery的
.empty()
方法。这个方法会移除匹配元素的所有子节点，包括其内容、子元素等。以下是具体的步骤和代码：
1. 引入jQuery库
首先，确保在你的HTML文件中引入jQuery库。你可以从CDN获取最新版本的jQuery：

2. 选择表格并删除所有TR元素
接下来，使用jQuery选择器选择你的表格，并调用
.empty()
方法来删除所有TR元素：
$(document).ready(function() {
$(‘#myTable’).empty();
});
在这段代码中，
#myTable
是表格的ID。如果你使用类选择器或者其他选择器，只需将
#myTable
替换为相应的选择器即可。
3. 代码示例
下面是一个完整的HTML和jQuery代码示例，演示如何删除表格中所有TR元素：

jQuery删除表格所有行

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

在这个示例中，我们添加了一个按钮，当用户点击这个按钮时，表格中所有的行将被删除。
三、总结
使用jQuery的
.empty()
方法可以轻松删除表格中所有TR元素。这种方法简洁高效，是处理HTML表格的一个好工具。通过上述步骤和代码示例，你可以轻松地在你的项目中实现这一功能。