JQuery：表行显示/隐藏基于列值

Question

我有一个表，其中包含可能值为Yes / No的列

<table id="mytable">
<thead>
<tr>
    <th>
        Col1
    </th>
    <th>
        Col2
    </th>

    <th>
        ActiveYN
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>
        Apple
    </td>
    <td>
        12345
    </td>

    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Orange
    </td>
    <td>
        67890
    </td>

    <td>
        No
    </td>
</tr>
<tr>
    <td>
        Mango
    </td>
    <td>
        456745
    </td>

    <td>
        Yes
    </td>
</tr>

我需要显示行，如果ActiveYN是'是'并且隐藏id ActiveYN是'否'我怎样才能访问JQuery中的ActiveYN并相应地显示/隐藏？

Answer 1

DEMO

$('button').on('click', function () {
    var $rowsNo = $('#mytable tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(2).text()) === "No"
    }).toggle();
});

Answer 2

这样的事情怎么样： $('td:contains("No")').parent().hide();

现场演示

JS

$('input').click(function(){
    $('td:contains("No")').parent().toggle();
}); 

HTML

<input type='button' value='hide/show' />

<table id="mytable">
<thead>
<tr>
    <th>
        Col1
    </th>
    <th>
        Col2
    </th>

    <th>
        ActiveYN
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>
        Apple
    </td>
    <td>
        12345
    </td>

    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Orange
    </td>
    <td>
        67890
    </td>

    <td>
        No
    </td>
</tr>
<tr>
    <td>
        Mango
    </td>
    <td>
        456745
    </td>

    <td>
        No
    </td>
</tr>

Answer 3

通常我会在行上添加这个属性：

<tr data-active="No">
....
</tr>

然后隐藏它们你可以做的一切：

$(function(){

$("[data-active=No]").hide();
});

或者，您可以在创建表时根据值添加不同的类/样式。

Answer 4

您可以从服务器端本身执行此操作。

@if (item.ActiveYN) {
    <tr style="display: none;">
} else {
    <tr>
}

我不知道剃刀语法，但你明白了。

为了能够从客户端执行此操作，请添加一个类。

@if (item.ActiveYN) {
    <tr class="hideMe">
} else {
    <tr>
}

然后在jQuery中：

$('.hideMe').hide();

编辑问题后再次编辑，现在如果我们完全忘记了服务器端：

$("mytable").find("tr:contains('No')").hide();

在按钮单击处理函数中使用此语句。 但是，请记住，它还会在任何地方找到任何包含“否”的文本。 为了使其更精确，使用正则表达式来搜索“否”。