过滤：如何在点击时隐藏/显示（切换）某些表格行？答案

【问题标题】：Filtering: How to hide/show (toggle) certain table rows on click?过滤：如何在点击时隐藏/显示（切换）某些表格行？
【发布时间】：2016-02-29 01:40:09
【问题描述】：

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

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

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

【问题讨论】：

可以用jQuery实现。
再解释一下。你想点击的地方和你想得到什么。
你的 Jquery 在哪里，到目前为止你已经尝试过了？
@ControlAltDel：这不是问题。
问题中对行为的解释很差，没有尝试任何尝试。我们不是来为您编写代码的

标签： javascript jquery filter toggle show-hide

【解决方案1】：

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

存储当前td中的文本，隐藏不包含文本的tr节点。

【讨论】：

【解决方案2】：

这是一个非常非常简单的测试，可以帮助您入门。

    $(function () {
        $("#vehicles tr td").click(function () {
            var desc = $(this).html();
            $("#vehicles tr").css("background-color", "white");
            $("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
        });
    });

这会为每个 TD 元素分配一个点击事件，将其值存储在某处，然后检查该值是否存在于表中，突出显示匹配的元素。试一试，我想它会让你朝着正确的方向前进。

【讨论】：