使用 jQuery 删除表格行的最佳方法是什么?

IT技术 javascript jquery html-table
2021-02-07 20:25:37

使用 jQuery 删除表格行的最佳方法是什么?

6个回答

你说得对:

$('#myTableRow').remove();

如果您的行有一个id这可以正常工作,例如:

<tr id="myTableRow"><td>blah</td></tr>

如果您没有id,则可以使用任何 jQuery过多的选择器

这样做确实意味着每行需要一个 id,这可能会增加很多开销。jQuery 允许其他更惯用的方法(对于 jQuery 的方法),请继续阅读有更多建议。
2021-03-25 20:25:37
“杰夫,什么是过多?”
2021-03-26 20:25:37
是的,我假设该行有一个 ID 而你有 ID :)
2021-03-27 20:25:37
很棒的东西!jQuery 是未来!
2021-03-27 20:25:37
对我来说非常有用,因为我能够在每一行中放置唯一的 ID。
2021-04-05 20:25:37
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

甚至更好的

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
更好的一个版本实际上更好
2021-03-29 20:25:37
@jorg,只是提一下,你的答案中有一个错字,在 .click 之后你必须把 function() 回调
2021-03-31 20:25:37
奇怪的是,您的解决方案比公认的解决方案要好得多。
2021-04-02 20:25:37
还有 $(this).closest('tr').remove();
2021-04-09 20:25:37

假设您的表格中的数据单元格中有一个按钮/链接,这样的事情就可以解决问题...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

这将删除单击的按钮/链接的父级的父级。您需要使用 parent() 因为它是一个 jQuery 对象,而不是一个普通的 DOM 对象,并且您需要使用 parent() 两次,因为该按钮位于一个数据单元中,该数据单元位于一行中......这是你想删除什么。$(this) 是被点击的按钮,所以简单地有这样的东西只会删除按钮:

$(this).remove();

虽然这将删除数据单元格:

    $(this).parent().remove();

如果您想简单地单击行上的任意位置将其删除,这样的操作就可以了。您可以轻松地修改它以提示用户或仅在双击时工作:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

希望有帮助......我自己在这方面有点挣扎。

.live 在 jQuery 1.7 中被弃用,并在 1.9 中被移除。参见jQuery.live
2021-03-15 20:25:37
那也行。这完全取决于您的按钮/链接在 DOM 中的位置,这就是为什么我给出了如此多的示例和如此长的解释。
2021-03-28 20:25:37
如果链接不是直接在 td 内部,而是在它周围有一个跨度怎么办?我认为最好这样做 $(this).parents('tr').remove(); 让它自己沿着 DOM 树向上走,找到 tr,然后将其删除。
2021-04-09 20:25:37
你也可以使用 $(this).parents('tr')
2021-04-10 20:25:37

您可以使用:

$($(this).closest("tr"))

用于查找元素的父表行。

它比 parent().parent() 更优雅,这是我开始做的,很快就发现了我的错误。

--Edit -- 有人指出问题是关于删除行...

$($(this).closest("tr")).remove()

如下所述,您可以简单地执行以下操作:

$(this).closest('tr').remove();

类似的代码片段可用于许多操作,例如在多个元素上触发事件。

再简洁一点: $(this).closest("tr").remove()
2021-04-10 20:25:37

容易..试试这个

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
我会$(this).parent().parent().parent()改为$(this).closest('tr'). 它更强大,并清楚地显示您正在选择的内容。
2021-03-16 20:25:37