jQuery 显示/隐藏表格行

Question

我想使用jQuery来显示/隐藏表格中的行。理想情况下，我希望在表格上方有按钮来对表格进行排序。

例如: [显示id为black的行] [显示id为white的行] [显示所有行]

我已经搜寻了很多地方，但找不到解决方案。有人知道如何使用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>

- Paul

---

您的代码无效 - 您不能有重复的 id 属性。我建议将它们改为 class。 - James Allardice

Answer 1

将你的黑色和白色 ID 改为类(class)，因为重复的 ID 是无效的。添加两个带有正确 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]方法来过滤带有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();
});

- user113716

---

@Paul：不用谢。我刚刚更新了我的答案。只要您不动态添加/删除行，底部的代码将表现最佳。 - user113716

帕特里克，我遇到了一个小问题。你的代码很好用，但是我正在使用jQuery“$（“.someclass tr:even”）。addClass（“alt”）；”来对表格进行斑马线条纹处理。然而，在应用筛选器之后，条纹会出现问题。有没有办法在筛选器之后重新应用条纹？ - Paul

@Paul：每当你隐藏/显示一些行时，你应该重新应用那段代码，但使用:visible选择器只影响那些现在可见的行。$(".someclass tr:visible:even").addClass("alt");如果这给你带来了麻烦，尝试反转它:even:visible。我不记得正确的顺序，如果有的话。 - user113716

Answer 2

过滤函数对我来说完全没有起作用；可能最近版本的jquery执行方式与上述代码中所使用的版本不同。不管怎样，我使用了:

    var black = $('.black');
    var white = $('.white');

选择器将找到所有被分类为黑色或白色的元素。按钮功能与上述说明保持不变：

    $('#showBlackButton').click(function() {
           black.show();
           white.hide();
    });

    $('#showWhiteButton').click(function() {
           white.show();
           black.hide();
    });

- UniverSoulSun

Answer 3

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>

- genesis

---

你的代码无效，你不能拥有重复的“id”属性值！ - James Allardice