如何使用復選框隱藏和顯示jQuery數據表中的行

Question

我有一個jquery數據表，如下所示：

<table id="dt_default" class="uk-table exclude_table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="aa">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="bb">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="cc">
            <td>1</td>
            <td>N1</td>
        </tr>
        <tr class="dd">
            <td>1</td>
            <td>N1</td>
        </tr>
    </tbody>
</table>

我有一組復選框，如下所示，該復選框位於數據表上方：

<div>
     AA<input type="checkbox" class="exclude" value="aa">
     BB<input type="checkbox" class="exclude" value="analysis">
     CC<input type="checkbox" class="exclude" value="progress">
     DD<input type="checkbox" class="exclude" value="done">
</div>

我需要的是：選中一個復選框時，與其值相對應的類必須從表中隱藏，而當未選中時，它應將其顯示回來。

例如：如果選中復選框AA，則對應的值為aa。 因此，必須從表中隱藏類aa，並且當取消選中它時，它必須再次顯示。

我嘗試過的腳本是：

$('.exclude').click(function() { 
    $(".exclude").each(function(){
        if ($(this).prop('checked')==true)
        { 
            var hidden = $(this).attr("value");
            $.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) {
                var row = oSettings.aoData[iDataIndex].nTr;
                return $(row).hasClass(hidden) ? false : true;
            }
            );
         }
        });                  
    });

此代碼無法正常工作。

它的作用是，當選中復選框時，它將隱藏相應的類，而我們必須在數據表中進行搜索/排序。 選中復選框后，它不能直接工作。

另外，當未選中復選框時，如何顯示返回的行？

Answer 1

嘗試這個：

$('.exclude').change(function () {
  $('#dt_default tr.' + $(this).val()).children('td').toggle();
});

Answer 2

我認為這將為您工作：

猜猜我們有這個HTML：

<tr class="aa"><td>...</td></tr>
<tr class="bb"><td>...</td></tr>
<tr class="cc"><td>...</td></tr>
<input type="checkbox" id="aa" />
<input type="checkbox" id="bb" />
<input type="checkbox" id="cc" /> <!-- Be careful, your <tr> should have the same class that your checkbox has. -->

在這種情況下，我們應該具有以下JQuery代碼：

$("input[type=checkbox]").click(function(){
    var check_id = $(this).attr("id");
    if($(this).is(':checked') == true) {
        $("tr."+check_id).fadeOut();
    } else {
        $("tr."+check_id).fadeIn();
    }
});

要點：您可以檢查value屬性或任何其他東西來隱藏或顯示您的tr。 最重要的是， tr class屬性應該與要檢查的input值相同。