过滤：如何隐藏/显示（切换）点击某些表格行？ [英] Filtering: How to hide/show (toggle) certain table rows on click?

问题描述

假设这个表（实际上它可能有更多的列和行）：

 < table id =vehicles> ; 
< tr> 
< th>类型< / th> 
< th>颜色< / th> 
< th>车轮< / th> 
< / tr> 
< tr> 
< td>汽车< / td> 
< td>红色< / td> 
< td> 4< / td> 
< / tr> 
< tr> 
< td>摩托车< / td> 
< td>绿色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td> Bike< / td> 
< td>蓝色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td>汽车< / td> 
< td>蓝色< / td> 
< td> 4< / td> 
< / tr> 
< tr> 
< td> Bike< / td> 
< td>绿色< / td> 
< td> 2< / td> 
< / tr> 
< tr> 
< td>摩托车< / td> 
< td>红色< / td> 
< td> 2< / td> 
< / tr> 
< / table> 
  

现在我的目标是能够点击表格数据（单元格），例如Car ，然后只显示两辆车。另一个点击汽车应该再次显示孔表。或者点击红色，然后只显示红色的车辆（红色的车和红色的摩托车）。如何使用jQuery来实现这个功能？

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< table id =vehicles> ; < TR> <的第i;的类型< /&第GT; <的第i;颜色< /第> <的第i;车轮及LT; /第> < / TR> < TR> < TD>汽车和LT; / TD> < TD>红色< / TD> < TD> 4℃; / TD> < / TR> < TR> < TD>摩托车和LT; / TD> < TD>绿色< / TD> < TD> 2'; / TD> < / TR> < TR> < TD>自行车< / TD> < TD>蓝色< / TD> < TD> 2'; / TD> < / TR> < TR> < TD>汽车和LT; / TD> < TD>蓝色< / TD> < TD> 4℃; / TD> < / TR> < TR> < TD>自行车< / TD> < TD>绿色< / TD> < TD> 2'; / TD> < / TR> < TR> < TD>摩托车和LT; / TD> < TD>红色< / TD> < TD> 2'; / TD> < / table>

从当前td，隐藏tr节点不包含文本。

Assuming this table (actually it could have more columns and rows):

<table id="vehicles">
  <tr>
    <th>Type</th>
    <th>Color</th>
    <th>Wheels</th>
  </tr>
  <tr>
    <td>Car</td>
    <td>Red</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Blue</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Car</td>
    <td>Blue</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Red</td>
    <td>2</td>
  </tr>
</table>

Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?

解决方案

$(function () {
    $( "td" ).on( "click", function() {
        var type = $(this).text();
        $('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
  <tr>
    <th>Type</th>
    <th>Color</th>
    <th>Wheels</th>
  </tr>
  <tr>
    <td>Car</td>
    <td>Red</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Blue</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Car</td>
    <td>Blue</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Bike</td>
    <td>Green</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Motorcycle</td>
    <td>Red</td>
    <td>2</td>
  </tr>
</table>

Stores the text from current td, hides tr nodes which do not contain the text.

这篇关于过滤：如何隐藏/显示（切换）点击某些表格行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！