Jquery显示/隐藏表行

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

i、 e[显示id为黑色的行][显示id为白色的行][显示所有行]

我找遍了，但找不到解决办法。有人知道我如何使用jquery实现这一点并使其跨浏览器兼容吗

谢谢（代码如下）

呜呜呜呜
标题文本
标题文本
标题文本
标题文本
标题文本
标题文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本

仅显示黑色

仅显示白色

把它们全部展示出来
.black{背景色：黑色；}
#白色{背景色：白色；}
呜呜呜呜
标题文本
标题文本
标题文本
标题文本
标题文本
标题文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
$（函数（）{
$（“#仅黑色”）。单击（函数（）{
$（“#白色”）.hide（）；
$（“.black”）.show（）；
});
$（“仅限白色”）。单击（函数（）{
$（“.black”）.hide（）；
$（“#白色”）.show（）；
});
$（“#全部”）。单击（函数（）{
$（“#白色”）.show（）；
$（“.black”）.show（）；
});
});

将黑白ID改为类（重复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();
});

---

…或者更好的做法是，从一开始就保留一个缓存集：

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();
});

---

过滤功能根本不适合我；也许jquery的最新版本与上面代码中使用的版本不一样。不管我用过：

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

选择器将查找分类为黑色或白色的每个元素。 按钮功能保持如上所述：

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

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

---

您的代码无效-您不能有重复的

id

属性。我建议将它们改为

类

。谢谢你指出这一点。你的代码也无效。。。您不能有重复的

id

属性值@保罗：不客气。我刚刚更新了我的答案。只要您不动态添加/删除行，最底层的代码将执行得最好。Patrick，我遇到了一个小问题。您的代码工作得很好，但是我使用jquery“$（“.someclass tr:even”）.addClass（“alt”）；”对表进行了斑纹条带化，但是在应用了过滤器之后，条带化会变得混乱。有没有办法在筛选后重新应用stripoing？@Paul：无论何时隐藏/显示某些行，都应该重新应用该代码，但使用

：visible

选择器仅影响现在可见的行<代码>$（“.someclass tr:visible:偶”）.addClass（“alt”）如果这给你带来麻烦，试着把它翻过来

：偶数：可见

。我不记得正确的顺序，如果有的话。

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();
});

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

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

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