0

我有一张如下表。

<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 是'完成'列”？

谢谢你的帮助。

4

3 回答 3

3

假设您的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();
于 2012-07-30T11:53:45.050 回答
1 
$('#subtask_table tr td:eq(6)').each(function() { // eq(6) selects the 7-th td, which is the "completed" column
    if(this.innerHTML === '0' || this.innerHTML === '')
    {
        $(this).parent().hide(); // td.parent returns the tr
    }
});

此外，这是多余的（虽然我不确定这会完成什么，也许你想显示行（tr not td）代替）：

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

只需使用：

$('#subtask_table td').show();
于 2012-07-30T11:49:05.023 回答
0

我可能会这样做：

$(document).ready(function() {
    $('#cbHideCompleted').click(function() {
        if($(this).prop('checked')) {    
            $('#subtask_table td:nth-child(7)').each(function() {
                //if td is 'completed' column
                var val = $(this).text();
                if (val === "" || val === "0")
                    $(this).parent().hide();    
            });
        } else {
            $('#subtask_table tr').show();
        }
    });
});

选择:nth-child()器“选择所有父元素的第 n 个子元素”，因此$('#subtask_table td:nth-child(7)')选择第 7 列中的所有 td 元素。因此，遍历这些单元格，如果文本内容是空字符串或“0”，则隐藏其父 tr 元素。

在您的 else 分支中，您不需要.each()循环：您可以.show()直接调用包含多个元素的 jQuery 对象，所有元素都会显示出来。

于 2012-07-30T11:52:33.643 回答