jQuery根据表内容隐藏行

jQuery hide row depending on table content

本文关键字：隐藏 jQuery      更新时间：2023-09-26

我首先有一个表，让我们说4x4由tr和td定义最后一个td包含一个复选框，它只能是2个选项，完成或不完成(选中或未选中)。

现在，在表的顶部我有另一个下拉列表作为过滤器(All, Completed, Incomplete)

根据过滤器的值，我的JS隐藏或显示请求的数据:

    var sel = $("#Filter option:selected").text();
    if (sel == "All") {
        $('tr').find('td:has(:checkbox:checked)').parent().show();
        $('tr').find('td:has(:checkbox:not(:checked))').parent().show();
    }
    if (sel == "Complete") {
        $('tr').find('td:has(:checkbox:not(:checked))').parent().hide();
        $('tr').find('td:has(:checkbox:checked)').parent().show();
    }
    if (sel == "Incomplete") {
        $('tr').find('td:has(:checkbox:checked)').parent().hide();
        $('tr').find('td:has(:checkbox:not(:checked))').parent().show();
    }

这个很有魅力。

现在，我想更改下拉列表的复选框。但是我找不到用JQuery来做这件事的方法。我不知道比较下拉列表中的文本的语法，在td中，在tr中。

我试着:

$('tr').find('td').find(".dropdown :selected").parent().hide();

但是我找不到在选定的select中指定文本的方法。

使用如下代码:

$("tr td .dropdown:selected[value='WHATEVER']").parent().hide();

来测试drop元素的值。或者如果你想测试下拉元素的文本:

$("tr td .dropdown:selected:contains(WHATEVER)").parent().hide();

您实际上需要获取复选框的值，然后比较其选择是完整的还是不完整的。像这样:

if ($('tr').find('td').find(".dropdown option:selected").val() == "SOMEVALUE") {
    ($('tr').find('td').find(".dropdown option:selected").parent().hide();
} else {
    ($('tr').find('td').find(".dropdown option:selected").parent().show();
}
相关文章：