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セレクターを使用して要素に直接アクセスする方法はありますか？そうでない場合、「// if td is'completed'column」を実装するにはどうすればよいですか？

ご協力いただきありがとうございます。

4

3 に答える 3

3

あなたのコラムが常に最後から2番目のコラムであると仮定すると、erledigtそれは非常に単純なはずです。

セルではなく行を繰り返し処理し、各行の最後から2番目のセルを見つけて、必要に応じて行を表示/非表示にします。

$('#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
    }
});

また、これは冗長です（これが何を達成するかはわかりませんが、代わりに行（tdではなくtr）を表示したい場合があります）：

$('#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要素を非表示にします。

.each()elseブランチでは、ループは必要ありません.show()。複数の要素を含むjQueryオブジェクトを直接呼び出すことができ、すべての要素が表示されます。

于 2012-07-30T11:52:33.643 に答える