我想根据按钮中的文本切换表行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