当前位置:首页 > jquery

jquery删除tr

2026-04-08 11:49:21jquery

使用 jQuery 删除表格行(<tr>

方法一:通过 remove() 方法删除指定行

// 删除 ID 为 "row1" 的行
$("#row1").remove();

// 删除所有匹配的行(例如 class 为 "to-delete" 的行)
$(".to-delete").remove();

方法二:通过 closest()remove() 删除按钮所在行

如果行内有删除按钮,可通过事件触发删除:

jquery删除tr

$(".delete-btn").click(function() {
    $(this).closest("tr").remove();
});

方法三:通过 detach() 方法临时删除(可恢复)

// 删除行但保留数据(可重新插入)
var deletedRow = $("#row1").detach();

// 重新插入到表格
$("table").append(deletedRow);

方法四:动态删除符合条件的所有行

// 删除内容包含 "test" 的行
$("tr:contains('test')").remove();

// 删除第 3 行(索引从 0 开始)
$("tr").eq(2).remove();

注意事项

  • 确保 DOM 加载完成后执行操作(需包裹在 $(document).ready() 中)
  • 动态添加的行需使用事件委托绑定删除事件:
    $(document).on("click", ".delete-btn", function() {
        $(this).closest("tr").remove();
    });

标签: jquerytr
分享给朋友:

相关文章

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery 选中

jquery 选中

jQuery 选中元素的方法 jQuery 提供了多种方式来选中 DOM 元素,以下是一些常用的方法: 通过 ID 选中元素 使用 # 符号加上元素的 ID 来选中特定元素: $('#elemen…

jquery 样式

jquery 样式

jQuery 样式操作 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加或移除类、获取样式值等。 修改 CSS 属性 使用 css() 方法可以直接修改元素…

jquery遍历

jquery遍历

jQuery遍历方法 jQuery提供了多种遍历DOM元素的方法,可以根据需求选择合适的方式操作元素集合。 each()方法 each()方法用于遍历jQuery对象中的每个元素,并对每个元素执行回…

jquery 高度

jquery 高度

jQuery 获取和设置元素高度的方法 使用 jQuery 可以方便地获取或设置元素的高度。以下是几种常用的方法: 获取元素高度 使用 height() 方法可以获取匹配元素中第一个元素的计算高度(…

jquery网页

jquery网页

jQuery 网页开发基础 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。以下是一些 jQuery 在网页开发中的核心…