javascript - 如何根据表中某一列的值隐藏表行

我有一张像下面的桌子。

<table id="subtask_table" style="width: 80%">
    <tr>
        <th>ID</th>
        <th>Titel</th>
        <th>Beschreibung</th>
        <th>Gemeldet von</th>
        <th>Erstellt am</th>
        <th>Geändert am</th>
        <th>Erledigt</th>


    </tr>

    <tr>
        <td>11</td>
        <td><a href="/taskExplorer/subtasks/edit/11">Termine verschieben</a></td>
        <td></td>
        <td></td>
        <td>2012-07-26 14:34:36</td>
        <td>2012-07-30 08:37:40</td>
        <td>1</td>
        <td><a href="/taskExplorer/subtasks/delete/11">löschen</a></td>
      </tr>
</table>

我想做的是，如果erledigt列（已完成）为0或为空，则隐藏此表的一行。

这就是我到目前为止所得到的：

$(document).ready(function() {
    $('#cbHideCompleted').click(function() {
        if($(this).prop('checked')) {

            $('#subtask_table td').each(function() {
                //if td is 'completed' column
                    //if value is 0 or null
                        //hide

            });
        } else {
            $('#subtask_table td').each(function() {
                $(this).show();
            });
        }
    });
});

有没有一种方法可以使用jquery选择器直接访问元素。如果没有，如何实现“ //如果td已完成”列？

谢谢你的帮助。

最佳答案

假设您的erledigt列始终是倒数第二列，那么它应该非常简单。

遍历行而不是单元格，并在每行中查找倒数第二个单元格，并根据需要显示/隐藏行。

$('#subtask_table tr').each(function() {
    var $erledigtCell = $(this).find("td").last().prev();
    var $row = $erledigtCell.parent();

    if($erledigtCell.text() == '1'){
        $row.hide();
    } else {
        $row.show();
    }
});

如果您对网格的生成方式有任何影响，那么可以向tr添加自定义属性（例如data-erledigt=...）会更好。比您无需遍历，显示在erledigt的哪一列都没有关系。

用这样的HTML：

<tr data-erledigt=0>....
.....
<tr data-erledigt=1>

您可以编写一个简单的jQuery：

$("tr[data-erledigt='0']").hide();