2

私はjQueryの初心者です。

さまざまなカテゴリの値を含むチェック ボックスに基づいてフィルター処理する必要があるこのテーブルがあります。ここに私が取り組んできたコードがあります 

<input class="prod_status" type="checkbox" value="Discontinued">Discontinued<br/>
<input class="prod_status" type="checkbox" value="Shipping">Shipping<br/>
<input class="prod_capacity" type="checkbox" value="1GB">1GB<br/>
<input class="prod_capacity" type="checkbox" value="2GB">2GB<br/>
<input class="prod_capacity" type="checkbox" value="4GB">4GB<br/>
<input class="prod_speed" type="checkbox" value="1000MHz">1000MHz<br/>
<input class="prod_speed" type="checkbox" value="1333MHz">1333MHz<br/>
<br /><br />

<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">
<caption>bla bla</caption>
<thead>
    <tr id="ProductID">
    <th>Product Number</th>
    <th>Status</th>
    <th>Capacity</th>
    <th>Speed</th>
    </tr>
</thead>
<tbody>
    <tr id="Memory1" class="part_detail">
    <td class="name">Memory1</td>
    <td class="status">Shipping</td>
    <td class="capacity">1GB</td>
    <td class="speed">1333MHz</td>
    </tr>
    <tr id="Memory2" class="part_detail">
    <td class="name">Memory2</td>
    <td class="status">Discontinued</td>
    <td class="capacity">2GB</td>
    <td class="speed">1000MHz</td>
    </tr>
    <tr id="Memory3" class="part_detail">
    <td class="name">Memory3</td>
    <td class="status">Shipping</td>
    <td class="capacity">2GB</td>
    <td class="speed">1333MHz</td>
    </tr>
    <tr id="Memory4" class="part_detail">
    <td class="name">Memory4</td>
    <td class="status">Discontinued</td>
    <td class="capacity">4GB</td>
    <td class="speed">1000MHz</td>
    </tr>
    <tr id="Memory5" class="part_detail">
    <td class="name">Memory5</td>
    <td class="status">Shipping</td>
    <td class="capacity">4GB</td>
    <td class="speed">1333MHz</td>
    </tr>
</tbody>
</table>

var oData = $("tbody tr.part_detail");
$(":checkbox.prod_status").change(function() {
    var checkedValues = $(":checkbox.prod_status:checked").map(function() {
    return this.value;
}).get();

    if (checkedValues.length > 0) {
        oData.hide();
        for (var i = 0; i < checkedValues.length; i++) {
            oData.filter(function() {
                if (checkedValues[i].toString() == $(this).find('.status').text()) 
                    $(this).show();
            });
        }
    }
    else
        $("tbody tr.part_detail").show();
});

私はそれをステータスカテゴリで動作させることしかできませんでした。その後は基本的に立ち往生しました。物事を必要以上に複雑にしてしまった気がしますが、私の jQuery の経験はそれを改善するのに十分ではありません。

要件を次のように要約します。

  • チェックボックスがチェックされていない場合、すべての行が表示されます
  • カテゴリ内の 1 つ以上のチェック ボックスがオンになっている場合、そのカテゴリ内の選択された値に一致するすべてのレコードが表示されます。
  • 他のカテゴリの 1 つ以上のチェック ボックスがオンになっている場合、すべてのカテゴリに一致するレコードのみが表示されます。

つまり、論理 AND は異なるカテゴリ間で適用され、論理 OR はカテゴリ内で適用されます。

どんな助けでも大歓迎です。

4

1 に答える 1

3

このフィドルを参照してくださいhttp://jsfiddle.net/abhiklpm/ZEDR9/5/

データに簡単にアクセスできるように、 「rel」属性といくつかの「class」を追加して、html を変更しました。

$("input:checkbox").click(function () {
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var status = $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

編集： 私はそのフィドルに間違いがあります、

変化する ：

<td class="capacity" rel="Shipping">2GB</td>

に ： <td class="capacity" rel="2GB">2GB</td>

それ以外の場合、2Gb では 1 つの結果しか表示されません。

于 2013-11-13T21:24:32.207 に答える