当前位置:首页 > 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相关资源的网站或社区)是开发者获取插件、教程和代码示例的重要平台。以下是几个与jQuery相关的优质资源网站: 1. jQuery官…

jquery和vue的区别

jquery和vue的区别

核心设计理念 jQuery是一个基于DOM操作的轻量级JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计等任务。它采用命令式编程风格,需要手动操作DOM元素。 Vue是一个渐进…

html jquery

html jquery

HTML 与 jQuery 基础 HTML 是超文本标记语言,用于构建网页的结构和内容。jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Aja…

jquery css

jquery css

jQuery 操作 CSS 的方法 jQuery 提供了多种方法来操作元素的 CSS 样式,包括获取、设置、添加或移除样式。以下是常用的方法: 获取 CSS 属性值 使用 .css() 方法获取元素…

jquery 动画

jquery 动画

jQuery 动画基础 jQuery 提供了一系列动画方法,用于实现元素的动态效果,如淡入淡出、滑动、自定义动画等。 常用动画方法 fadeIn() / fadeOut(): 元素的淡入和…

jquery遍历

jquery遍历

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