过滤:如何在点击时隐藏/显示(切换)某些表格行?

假设这个表(实际上它可能有更多的列和行):

Type Color Wheels
Car Red 4
Motorcycle Green 2
Bike Blue 2
Car Blue 4
Bike Green 2
Motorcycle Red 2

现在我的目标是能够点击表格数据(单元格),例如“Car”,然后只显示两辆车。 再次单击“Car”应再次显示孔表。 或者单击“红色”,然后只显示红色车辆(红色汽车和红色摩托车)。 如何使用jQuery实现这一目标?

 $(function () { $( "td" ).on( "click", function() { var type = $(this).text(); $('td:first-child').parent('tr:not(:contains('+type+'))').toggle(); }); }); 
  
Type Color Wheels
Car Red 4
Motorcycle Green 2
Bike Blue 2
Car Blue 4
Bike Green 2
Motorcycle Red 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"); }); }); 

这会将click事件分配给每个TD元素,将其值存储在某处,然后检查表中是否存在所述值,突出显示匹配的元素。 给它一个旋转,我认为它会让你朝着正确的方向前进。