当前位置：首页 > jquery

jquery删除tr

2026-02-03 18:32:51jquery

jQuery 删除表格行（tr）的方法

使用 jQuery 删除 HTML 表格中的行（<tr> 元素）可以通过以下几种方式实现：

通过选择器定位并删除行

$("#tableId tr").remove(); // 删除表格内所有行
$("#tableId tr:eq(1)").remove(); // 删除第二行（索引从0开始）
$("#tableId tr:last").remove(); // 删除最后一行
$("#rowId").remove(); // 删除指定ID的行

通过事件触发删除当前行

在按钮点击事件中删除所在行：

jquery删除tr

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

通过过滤条件删除特定行

删除包含特定内容的行：

jquery删除tr

$("#tableId tr:contains('要删除的内容')").remove();

删除满足条件的行：

$("#tableId tr").filter(function() {
    return $(this).find("td").eq(0).text() === "特定值";
}).remove();

注意事项

确保 DOM 已加载完成后再执行删除操作，可以将代码放在 $(document).ready() 中
删除前最好添加确认提示，防止误操作
如果要保留数据，可以先备份再删除

示例代码

<table id="myTable">
    <tr><td>1</td><td><button class="delete">删除</button></td></tr>
    <tr><td>2</td><td><button class="delete">删除</button></td></tr>
</table>

<script>
$(document).ready(function(){
    $(".delete").click(function(){
        if(confirm("确定要删除这行吗？")) {
            $(this).closest("tr").remove();
        }
    });
});
</script>

这些方法可以根据实际需求选择使用，灵活应用于各种表格操作场景。