Jquery 显示/隐藏表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6686377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery show/hide table rows
提问by Paul
I want to be able to show/hide the rows in a table using jquery. Ideally I want to have buttons above the table to sort the table with.
我希望能够使用 jquery 显示/隐藏表中的行。理想情况下，我希望在表格上方有按钮来对表格进行排序。
i.e [Show rows with id:black] [Show rows with id:white] [Show all rows]
即[显示带有 id:black 的行] [显示带有 id:white 的行] [显示所有行]
I have searched all over but cannot find a solution. Anyone know how i can do this with jquery and make it cross browser compatible?
我已经搜索了所有内容，但找不到解决方案。任何人都知道我如何使用 jquery 做到这一点并使其跨浏览器兼容？
Thanks (Code below)
谢谢（下面的代码）
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr id="black">
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
</tr>
</thead>
<tbody>
<tr id="white">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr id="black">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
回答by user113716
Change your black and white IDs to classes instead (duplicate IDs are invalid), add 2 buttons with the proper IDs, and do this:
将您的黑白 ID 改为类（重复 ID 无效），添加 2 个具有正确 ID 的按钮，然后执行以下操作：
var rows = $('table.someclass tr');
$('#showBlackButton').click(function() {
var black = rows.filter('.black').show();
rows.not( black ).hide();
});
$('#showWhiteButton').click(function() {
var white = rows.filter('.white').show();
rows.not( white ).hide();
});
$('#showAll').click(function() {
rows.show();
});
<button id="showBlackButton">show black</button>
<button id="showWhiteButton">show white</button>
<button id="showAll">show all</button>
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr class="black">
...
</tr>
</thead>
<tbody>
<tr class="white">
...
</tr>
<tr class="black">
...
</tr>
</tbody>
</table>
It uses the filter()[docs]method to filter the rows with the blackor whiteclass (depending on the button).
它使用filter()[docs]方法过滤带有blackorwhite类的行（取决于按钮）。
Then it uses the not()[docs]method to do the opposite filter, excluding the blackor whiterows that were previously found.
然后它使用not()[docs]方法进行相反的过滤，排除之前找到的black或white行。
EDIT:You could also pass a selector to .not()instead of the previously found set. It may perform better that way:
编辑：您还可以将选择器传递给.not()而不是先前找到的集合。这样做可能会更好：
rows.not( `.black` ).hide();
// ...
rows.not( `.white` ).hide();
...or better yet, just keep a cached set of both right from the start:
...或者更好的是，从一开始就保留一组缓存：
var rows = $('table.someclass tr');
var black = rows.filter('.black');
var white = rows.filter('.white');
$('#showBlackButton').click(function() {
black.show();
white.hide();
});
$('#showWhiteButton').click(function() {
white.show();
black.hide();
});
回答by UniverSoulSun
The filter function wasn't working for me at all; maybe the more recent version of jquery doesn't perform as the version used in above code. Regardless; I used:
过滤器功能根本不适合我；也许较新版本的 jquery 不像上面代码中使用的版本那样执行。不管; 我用了：
var black = $('.black');
var white = $('.white');
The selector will find every element classed under black or white. Button functions stay as stated above:
选择器将找到分类为黑色或白色的每个元素。按钮功能保持如上：
$('#showBlackButton').click(function() {
black.show();
white.hide();
});
$('#showWhiteButton').click(function() {
white.show();
black.hide();
});
回答by genesis
http://sandbox.phpcode.eu/g/corrected-b5fe953c76d4b82f7e63f1cef1bc506e.php
http://sandbox.phpcode.eu/g/corrected-b5fe953c76d4b82f7e63f1cef1bc506e.php
<span id="black_only">Show only black</span><br>
<span id="white_only">Show only white</span><br>
<span id="all">Show all of them</span>
<style>
.black{background-color:black;}
#white{background-color:white;}
</style>
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr class="black">
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
</tr>
</thead>
<tbody>
<tr id="white">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr class="black" style="background-color:black;">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
<script>
$(function(){
$("#black_only").click(function(){
$("#white").hide();
$(".black").show();
});
$("#white_only").click(function(){
$(".black").hide();
$("#white").show();
});
$("#all").click(function(){
$("#white").show();
$(".black").show();
});
});
</script>
