Jquery显示/隐藏表行

Question

我希望能够使用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>

Answer 1

将您的黑白ID更改为类(重复ID无效),添加具有正确ID的2个按钮,并执行以下操作:

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]方法过滤带有black或white类的行(取决于按钮).

然后,它使用not()^[docs]方法执行相反的过滤器,排除先前找到的行black或white行.

编辑:您也可以传递一个选择器.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();
});