筛选基于一定的复选框选中TR(filter certain TR based on checkbox

2019-10-28 15:19发布

请帮助我,因为我仍然在努力把握jQuery的编码。 我有这样的数据,并希望根据用户的复选框,选择如下的HTML代码进行过滤。

没事的时候检查显示。所有行。

当所有的复选框选中显示。所有的行

所显示的符合所选的标准。只有行。 例如,

一种。 当2GB进行确认,仅2GB行显示。

湾 当运输和2GB的检查,只有内存3显示

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

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

  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/



文章来源: filter certain TR based on checkbox checked