0

私はまだjQueryのコーディングを理解しようとしているので、助けてください。私はこのデータを持っており、以下の html コードとしてユーザーのチェック ボックスの選択に基づいてフィルター処理したいと考えています。

.何もチェックされていない場合、すべての行が表示されます。

.すべてのチェックボックスをオンにすると、すべての行が表示されます

.選択した基準を満たす行のみが表示されます。例えば、

a. 2GB をチェックすると、2GB の行のみが表示されました。

b. Shippingと2GBにチェックを入れるとMemory3しか表示されない

<input type="checkbox" >1GB<br/>
<input type="checkbox" >2GB<br/>
<input type="checkbox" >4GB<br/>
<input type="checkbox" >1000MHz<br/>
<input type="checkbox" >1333MHz<br/>
<input type="checkbox" >Discontinued<br/>
<input type="checkbox" >Shipping<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">
        <td>Memory1</td>
        <td>Shipping</td>
        <td>1GB</td>
        <td>1333MHz</td>
    </tr>
    <tr id="Memory2">
        <td>Memory2</td>
        <td>Discontinued</td>
        <td>1GB</td>
        <td>1000MHz</td>
    </tr>
    <tr id="Memory3">
        <td>Memory3</td>
        <td>Shipping</td>
        <td>2GB</td>
        <td>1333MHz</td>
    </tr>
    <tr id="Memory4">
        <td>Memory4</td>
        <td>Discontinued</td>
        <td>4GB</td>
        <td>1000MHz</td>
    </tr>
    <tr id="Memory5">
        <td>Memory5</td>
        <td>Shipping</td>
        <td>4GB</td>
        <td>1333MHz</td>
    </tr>
</tbody>
4

1 に答える 1

2

少し寛大に感じましたが、以下のコードは次のことを行います

  1. チェックボックスの変更時に、選択した値の配列をマップします
  2. 選択した値を繰り返し、その値をtd含むものを見つける

  3. tr選択した値の親を表示

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

    $("tbody tr").hide();
    for (var i = 0; i < checkedValues.length; i++) {
        $("tbody tr td:contains('" + checkedValues[i] + "')").parent("tr").show();
    }
});

デモ: http://jsfiddle.net/kXNAg/

于 2013-11-04T21:00:10.650 に答える