Question

请帮助我，因为我仍在尝试掌握jQuery编码。我有这些数据，并希望根据用户的复选框选择过滤它作为下面的html代码。

。未选中任何内容时，将显示所有行。

。选中所有复选框后，将显示所有行

。仅显示符合所选条件的行。例如，

一个。选中2GB时，只显示2GB行。

湾运送和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>

Answer 1

感觉有点慷慨，下面的代码执行以下操作

在复选框更改时，映射选定值的数组
迭代所选值并查找包含所述值的td

显示所选值的父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/

根据复选框选中过滤某些TR

1 个答案: