如何使用 jQuery 隐藏和显示表格中的行？答案

【问题标题】：How can I hide and show rows in my table using jQuery?如何使用 jQuery 隐藏和显示表格中的行？
【发布时间】：2012-07-20 10:14:43
【问题描述】：

我有一个表，其中我的行有类：

<table id="abc">
<tr class="level-0">
<tr class="level-1">
<tr class="level-2">
</table>

我需要创建两个按钮。

[隐藏第 1 级和第 2 级] - 单击此选项可隐藏或显示所有 2 级行。
[Hide level 2] - 单击此选项时隐藏或显示 level-1 和 level-2 行。

谁能告诉我如何用 jQuery 实现它？

【问题讨论】：

api.jquery.com/toggle

标签： jquery

【解决方案1】：

使用click 事件处理程序和toggle 函数（用于描述检查jquery API）：

$('#button1').click(function() {
    // all trs with level-1 class inside abc table
    $('#abc tr.level-1').toggle();
});

$('#button1and2').click(function() {
    // all trs with level-1 or level-2 class inside abc table
    $('#abc tr.level-1, #abc tr.level-2').toggle();
});

http://jsfiddle.net/73JAV/

【讨论】：

那行不通——请做一个小提琴并演示一下；此外，您正在重新查询两个点击处理程序内部的 dom，这是不必要的开销。
好吧，我添加了小提琴并且它可以工作，尽管 OP 没有明确指定它应该如何表现：“隐藏或显示”，所以对我来说听起来像 toggle。
关于“不必要的开销”：似乎没有人太在意它（检查其他答案...），因为它不是问题的重点（除非指定）。由 OP 来解决，因为她/他是唯一知道完整代码结构的人。
你可以不同意我的评论；只是指出您在我投反对票时提出的解决方案不起作用。我摆弄了它，然后您进行了编辑。如果您冒犯了，请道歉；我认为一个不会不必要地重新查询 DOM 的 3 行简洁的解决方案始终是最好的方法。
@philwinkle 确定。我添加了小提琴，但我的答案保持不变;）

【解决方案2】：

使用点击和next()函数：

http://jsfiddle.net/Ah7Dm/

$('.level-1').click(function(){
  $(this).next('.level-2').toggle();
});

【讨论】：

【解决方案3】：

$(function(){
    $('#button1').click(function(){
        $('#level0').hide('slow');  
        $('#level0').hide('slow');  
        ...
    });

    $('#button2').click(function(){
        $('#level0').show('slow');  
        $('#level0').show('slow');  
        ...
    });         
});

【讨论】：

【解决方案4】：

检查这个

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" >
    </script>
    <script type="text/javascript">
        $(function(){
            $('#level_1_2').click(function(){
                $('.level-2').toggle();
            });
            $('#level_2').click(function(){
                if(jQuery('.level-1').is(':visible')){
                    $('.level-2').show();
                }else{
                    $('.level-2').hide();
                }
                $('.level-2 , .level-1').toggle();
            });
        });
    </script>
</head>
<body>
    <input type="button" id="level_1_2" value="Hide level 1 and 2">
    <input type="button" id="level_2" value="Hide level 2">
    <table id="abc">
    <tr class="level-0"><td>0</td></tr>
    <tr class="level-1"><td>1</td></tr>
    <tr class="level-2"><td>2</td></tr>
    </table> 
</body>
</html>

【讨论】：

【解决方案5】：

我有同样的问题，下一级是前一个 tr 的子级。

`<table>
<tbody>
 <tr class="level-1"></tr>
 <tr class="level-2"></tr> 
 <tr class="level-3"></tr>
 <tr class="level-4"></tr>
 <tr class="level-4"></tr>
 <tr class="level-2"></tr>
 <tr class="level-2"></tr>
</tbody>
</table>

到目前为止我有

$('table tbody .level-1').click(function(event) {
        event.preventDefault();

        var current_tr_class = $(this).parent().attr('class');
        next_tr_class = parseInt(current_tr_class.replace ( /[^\d.]/g, '' ))+1; // get last increase by 1 it is 1 make it 2

        $('tr.level-'+next_tr_class).toggle({ opacity: "toggle" }); // Open toggle2
        });

我希望这可以解决您的问题，但不是我的，我都是动态生成的。如果您单击级别 1，它将取消切换级别 2 的所有元素，即使它在级别 4 之后也是如此。但是level-4仍然是隐藏的，就像循环一样。

【讨论】：

我有和你一样的要求，每一个奇数行都是我想要在点击上面的行时展开的细节。我发现了这个不错的小 jQuery 插件。非常简单的代码：jankoatwarpspeed.com/…