我希望能够使用jquery显示/隐藏表中的行.理想情况下,我想在表格上方有按钮来对表进行排序.
即[显示ID为黑色的行] [显示ID为白色的行] [显示所有行]
我已经搜索过,但找不到解决方案.任何人都知道如何使用jquery来做到这一点,使其跨浏览器兼容？
谢谢(代码如下)
<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>
解决方法
将您的黑白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>
它使用filter()[docs]方法用黑色或白色类过滤行(取决于按钮).
然后使用not()[docs]方法执行相反的过滤器,不包括之前发现的黑色或白色行.
编辑：您也可以将选择器传递给.not(),而不是先前找到的集合.它可能会表现得更好：
rows.not( `.black` ).hide(); // ... rows.not( `.white` ).hide();
…或者更好的是,从一开始就保持一个缓存的一套：
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();
});
