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

问题描述

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

Please help me as I am still trying to grasp the jQuery coding. I have this data and would like to filter it based on users' check box selection as the html code below.

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

.All rows are displayed when nothing is checked.

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

.All rows are displayed when all check boxes checked

.仅显示符合选定条件的行.例如，

.Only rows that meet selected criteria are displayed. For example,

a.选中2GB时，仅显示2GB的行.

a. When 2GB checked, only 2GB rows displayed.

b.选中运送和2GB"后，仅显示Memory3

b. When Shipping and 2GB checked, only Memory3 is displayed

<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>

推荐答案

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

Was feeling a bit generous, the below code does the following

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/

这篇关于根据选中的复选框过滤某些TR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！