我想根据按钮中的文本切换表行filter

  
Type Color Wheels
Car Red 4
Motorcycle Green 2
Bike Blue 2
Car Blue 4
Bike Green 2
Motorcycle Red 2
$(function () { $("#btn").click(function() { var type = $(this).text(); $('td:first-child').parent('tr:not(:contains('+type+'))').toggle(); }); $("#btn1").click(function() { var type = $(this).text(); $('td:first-child').parent('tr:not(:contains('+type+'))').toggle(); }); });

添加到: 过滤:如何在点击时隐藏/显示(切换)某些表行? 基于Itotally提供的解决方案,我基于按钮文本过滤表行。 这是最有效的解决方案吗?

还有一些其他解决方案

您可以根据自己的选择添加选择,并仅显示所选项目

在您搜索的td上添加类类型。

演示

 $("#choice").change(function(){ var choice = $(this).val().toUpperCase(); $("table tr").each(function (index) { if (index !== 0) { $row = $(this); var id = $row.find("td.type").text().toUpperCase(); if (id.indexOf(choice) == -1) { $row.hide(); } else { $row.show(); } } }); }); 
   
Type Color Wheels
Car Red 4
Motorcycle Green 2
Bike Blue 2
Car Blue 4
Bike Green 2
Motorcycle Red 2