如何使用复选框隐藏和显示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;
            }
            );
         }
        });                  
    });

此代码未按预期工作。

它所做的是，在选中复选框时隐藏相应的类，我们必须在DataTable中执行搜索/排序。选中复选框时，它不能直接工作。

当复选框未选中时如何显示该行？

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 的值相同。