jQuery中的可折叠表格答案

【问题标题】：Collapsible table in jQueryjQuery中的可折叠表格
【发布时间】：2013-09-30 15:36:27
【问题描述】：

我正在尝试创建一个表，其中包含可以使用 jQuery 折叠和展开的标题行。到目前为止，这是我的全部代码：

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").each(function() {
         $(this).slideToggle("fast");
      });
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr id="cat1" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat2" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

</body>                                                                 
</html>

如果我是正确的，英文的 jQuery 部分如下所示：“当单击 ID 为 'cat1' 且类为 'header' 的行时，查找 ID 为 'cat1' 的所有行并且一个 'child' 的类，对于每一个，slideToggle。"

然而，当我运行它并单击标题行时，什么也没有发生。有什么见解吗？

编辑：向 HTML 表添加了第二个类别。对不起，我应该更具体。我希望能够单击特定类别的标题行，并且只有那些子行折叠，而不是页面上的所有子行。以这种方式，表格就像“手风琴”一样，行按类别分组在一起。

【问题讨论】：

您需要更改分配给 <tr> 元素的 ID，因为 ID 必须是唯一的才能符合 HTML 规范
谢谢拉斯，我没有意识到。我正在尝试按类别将行分组。除了为每个类别创建两个 CSS 类（一个用于标题行，一个用于子行）之外，还有什么方法可以做到这一点？
每个类别不一定需要 2 个 CSS 类 - 对于标题行和子行仅使用一个 CSS 类就可以正常工作。

标签： jquery html css

【解决方案1】：

这将导致点击只影响表中包含您点击的标题的行，这意味着您可以将其更改为使用 css 类而不是复制 id。

$("tr#cat1.header").click(function () { 
   $("tr#cat1.child", $(this).parent()).slideToggle("fast");
});

基本上this 是被点击的标题，我们将它包装在一个jQuery 对象中并调用parent()（它返回表格），然后将其指定为新查询的上下文。

您的页面现在看起来像这样：

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
</body>                                                                 
</html>

【讨论】：

P.S.我在让 slideToggle 在 IE 中工作时遇到了一点问题，但在 Opera 中工作正常。
它在 IE 中再次运行，但没有动画，看起来它只是突然出现和消失。把它留给 IE 会很痛苦......
这正是我要找的。我花了一段时间才弄清楚这条线： $("tr.child", $(this).parent()).slideToggle("fast");但我想我现在已经明白了：“对于类为‘子’且该行的父行是被单击的行的每一行，slideToggle。太棒了，谢谢！
糟糕，如此接近。应为：“对于类为“子”且该行的父行是单击标题行的表的每一行，在该表中滑动切换该子行”
+1 - 我回来建议使用多个表（但看起来您已经这样做了！）因为从语义上讲，您不应该在单个表中散布标题。我也会更新我的答案以适应多个表格。

【解决方案2】：

首先，您不应该有重复的行 ID。页面上每个元素的 ID 应该是唯一的。

另外，您不应该使用each，因为jQuery 会自动将slideToggle 函数应用于选择器匹配的每个元素。我建议删除 ID 并改用类名：

$("tr.header").click(function () { 
   $("tr.child").slideToggle("fast");
});

如果您想确保只有某些表格可以执行此切换功能，请在表格上放置一个类并更新您的选择器：

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
---

$(".collapsible tr:first").click(function () { 
   $(this).nextAll().slideToggle("fast");
});

对编辑的回应：

Rory 的回答是正确的，我只是在扩展它。如果您使用多个表格，您可以从行上的<tr>s 中删除 CSS 类并将表格简化为：

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Cat1</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

<table class="collapsible">
    <tr>
        <td>Cat2</td>
        <td>Cat2</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

和jQuery下来：

$(".collapsible tr:first").click(function () {  
   $(this).nextAll().slideToggle("fast"); 
});

【讨论】：

我将在这里遇到的问题是，当我单击任何标题时，所有子行都会折叠，而我宁愿只折叠该标题的子行。这就是我试图通过为一组行设置相同的 ID 来实现的（有点像将它们组合在一起的一种方式）。我已经编辑了这个问题以反映这一点。由于具有相同 ID 的多个标签显然是错误的，因此有什么建议吗？
@David：看看我的回答，它会照顾你想要的，而不使用重复的 id 值。
+1 我完全忘记了：首先，显示当你休假一个月时会发生什么^_^

【解决方案3】：

这是@Rory 的answer 的扩展，用于处理多个层次结构，我也更喜欢fadeToggle 到slideToggle，因为（至少在FF v24 中）当您的表中有数百行然后@ 987654325@ 一秒钟内什么也没做，然后所有的行突然消失了——这让你想知道你是否真的点击了该行。 fadeToggle 立即开始淡化行，因此您知道发生了什么事。

我使用直接父级的id 而不是child 类，然后您可以递归地处理每个分支。还有一个 'collapsed' 类，我用它来修复当有一个子行已经折叠时折叠父行的错误。

请看下面代码的JSFiddle：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">                                         
$(document).ready(function() {
    $('tr.header').click(function () { 
        toggleRowChildren($(this), 'header');
    });

    function toggleRowChildren(parentRowElement, parentClass) {
        var childClass = parentRowElement.attr('id');
        $('tr.'+childClass, parentRowElement.parent()).fadeToggle('fast');
        $('tr.'+childClass).each(function(){
            if ($(this).hasClass(parentClass) && !$(this).hasClass('collapsed')) {
                toggleRowChildren($(this), parentClass);
            }
        });
        parentRowElement.toggleClass('collapsed');
    }
});
</script>                                                               
</head>                                                                 
<body>                                                                  
<table class="table table-hover table-bordered">
    <tr id="cat1" class="header">
        <th>Cat1</th>
        <th>Row</th>
    </tr>
    <tr class="cat1">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1a" class="header cat1">
        <th>Cat1a</th>
        <th>Row</th>
    </tr>
    <tr class="cat1a">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="cat1a">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <th>Cat2</th>
        <th>Row</th>
    </tr>
    <tr class="cat2">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>
</body>                                                                 
</html>

【讨论】：

【解决方案4】：

不应该更像这样吗？我的意思是，这通常是整个文档。

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").slideToggle("fast");
   });

【讨论】：