javascript - 当关键字包含在特定 td 中时如何删除整个 tr

Question

在我的文档中的多个<tr>'s 中有 7 个类，每个类有时都有一个对应的类名（即 sub、id、assigned、sub、sub、status 和一个无类的“td”）。在 td class = "status" 中有一个 span 类，定义为 <span class = "statusBox">Passed</span> or <span class = "statusBox">Failed</span>.

如果跨度类中包含的文本是“通过”，我需要删除整个<tr>. 如果失败，它将保留在文档上。我怎样才能做到这一点？

我的第一次尝试是通过一个电话，例如：

function() {
    if ($('tr td span.statusBox').html() == "Passed"){
    $('tr td span.statusBox').hide();  
}

但这仅删除了短语“Passed”的每个实例，而不是整个<tr>.

我也试过 $("tr td span.statusBox:contains('Passed')").each(function(){ $(this).css("visibility","hidden"); });

我觉得这更符合正确的道路，但我似乎无法让它发挥作用。

Answer 1

你很接近：找到带有单词“Passed”的状态框，然后找到最近的祖先tr元素并将其从 DOM 中删除：

$("tr td span.statusBox").filter(":contains('Passed')").each(function(){
    $(this).closest('tr').remove();
});

由于:contains操作符是一个 jQuery 扩展（它已从 CSS 规范中弃用），因此将选择器分成两部分会更快。首先是查找所有的类跨度statusBox，这将使用本机浏览器方法查找元素。然后使用操作符过滤这些元素:contains（可能具有本机实现或可能在 jQuery 中实现，具体取决于浏览器）。

Answer 2

这是因为您正在更改 span 而不是 parent 的可见性<tr>。您可以使用$(this).closest('tr')来获取行元素，然后更改其可见性。

$("tr td span.statusBox:contains('Passed')").each(function(){
    $(this).closest('tr').css("visibility","hidden"); 
});

Answer 3

$(".statusBox").each(function (i, e) {
    if ($(e).text() == "Passed") {
        $(e).closest('tr').hide();
    }
});

http://jsfiddle.net/B7Wqy/