Javascript 单击时隐藏/显示（切换）表格行 $（函数（）{ $（“td”）。在（“单击”，函数（）{ 变量类型=$（this.text（）； $（'td:first child'）.parent（'tr:not（：contains（'+type+'）））.toggle（）； }); }); 类型 颜色 车轮 汽车 红色 4. 摩托车 绿色 2. 自行车 蓝色 2. 汽车 蓝色 4. 自行车 绿色 2. 摩托车 红色 2.

后续操作：只要表格元素处于打开/关闭状态，这项功能就可以工作，但是如果您在一行中选择一个项目，然后在另一行中选择一个项目，则过滤会出错。

可能有更好的方法来实现这一点，但是如果您只跟踪上次单击的类型以及表格是否已被过滤，当需要重置表格或应用过滤器时，您可以更清楚地了解

---

那么，你的问题是什么？

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

$(function () {
        var last_type = null;
    var filtered = false;
    $( "td" ).on( "click", function() {
            console.log("last_type: "+last_type);
        var type = $(this).text();
        console.log("type: "+type);
        if(filtered && last_type == type) {
            // type is already filtered. Show all.
            $("tr, td").show();
          last_type = null; // reset
          filtered = false; // reset
        } else {
            $("tr, td").show(); // show all before filtering
            $('td:first-child').parent('tr:not(:contains('+type+'))').hide();
          filtered = true; // set filter flag to true
        }
        last_type = type; // set last type clicked
    });
});