Jquery 显示/隐藏表格行

Posted

技术标签:

【中文标题】Jquery 显示/隐藏表格行【英文标题】:Jquery show/hide table rows 【发布时间】:2011-07-13 22:18:31 【问题描述】:

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

i.e [Show rows with id:black] [Show rows with id:white] [Show all rows]

我已经搜索了所有但找不到解决方案。有谁知道我如何使用 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 属性。我建议将它们改为class 感谢您指出这一点。 【参考方案1】:

将您的黑白 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] 方法过滤具有blackwhite 类的行(取决于按钮)。

然后它使用not()[docs] 方法进行相反的过滤,排除之前找到的blackwhite 行。


编辑:您还可以将选择器传递给.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();
);

【讨论】:

@Paul:不客气。我刚刚更新了我的答案。只要您不动态添加/删除行,最底部的代码将表现最佳。 Patrick,我遇到了一个小问题。您的代码效果很好,但我使用 jquery "$(".someclass tr:even").addClass("alt");" 对表进行了斑马条纹处理然而,在应用过滤器后,条带化变得混乱。有没有办法在过滤器后重新应用条带化? @Paul:无论何时隐藏/显示某些行,都应该重新应用该代码,但使用:visible 选择器仅影响那些现在可见的行。 $(".someclass tr:visible:even").addClass("alt"); 如果这给您带来麻烦,请尝试翻转 :even:visible。我不记得正确的顺序,如果有的话。【参考方案2】:

过滤器功能根本不适合我;也许更新版本的 jquery 不像上面代码中使用的版本那样执行。不管;我用过:

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

选择器将查找归类为黑色或白色的每个元素。 按钮功能如前所述:

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

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

【讨论】:

【参考方案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>
.blackbackground-color:black;
#whitebackground-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>

【讨论】:

您的代码也无效...您不能有重复的id 属性值!

以上是关于Jquery 显示/隐藏表格行的主要内容,如果未能解决你的问题,请参考以下文章

根据下拉列表的值隐藏和显示一行表格 - jquery

jquery给表格动态添加删除行后如何获取数据

jQuery:通过搜索输入隐藏表格行,解决 td rowspan 和 colspan

使用 jQuery 滑动切换一组表格行

使用不使用数据表的普通 Jquery 显示/隐藏

使用 jQuery 查找下一个表格行