javascript - 过滤 jquery 数据表行

Question

我正在处理这个表，如果该列没有数据，则需要过滤行。我能够过滤掉整个表，但在过滤掉特定列的行时遇到问题。任何帮助将不胜感激。

https://jsfiddle.net/mleitao/twg0qqq2/

$(document).ready(function() {
$('#camera').click(function() {
    $("#table-ActiveRooms tr td").each(function() {
        var cell = $(this)
        if (cell.children().length == 0) {
            $(this).parent().hide();
        }
    });
});

$('#btnReset').click(function() {
    $("#table-ActiveRooms tr").each(function() {
        $(this).show();
    });
});

});

Answer 1

您收到的一些建议过于复杂。您不需要使用 .each，也不需要 if 语句来检查空值。

通过将选择器修改得更加具体，您的代码可以更加简洁、更加高效，而无需使用单个 each 或 if。

请参见此处:https://jsfiddle.net/twg0qqq2/44/

$(document).ready(function() {

    $tableRows = $("#table-ActiveRooms tr");

    $('#camera').click(function() {
         $tableRows.has("td:nth-child(2):empty").hide();
    });

    $('#monitor').click(function() {
         $tableRows.has("td:nth-child(3):empty").hide();
    });

    $('#phone').click(function() {
         $tableRows.has("td:nth-child(4):empty").hide();
    });

    $('#btnReset').click(function() {
         $tableRows.show();
    });
});

nth-child(2) 中的 2 代表第 2 列。正如您可以假设的，我们只需更改此数字以匹配 monitor 和 phone.