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();

在按鈕單擊處理函數中使用此語句。 但是，請記住，它還會在任何地方找到任何包含“否”的文本。 為了使其更精確，使用正則表達式來搜索“否”。