时间戳

首页 > 解决方案 > 关闭表格折叠行

javascript - 关闭表格折叠行

问题描述

我使用了从 jquery 中使用的折叠函数来使用下面的 HTML 代码。

<table class="table table-hover table-bordered">
    <thead style="background-color: #404e67">
        <tr style="color: white; font-size: 12px; text-align: center;">
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of- 
            rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
            <td>SO#</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-1" class="collapse">
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
            <td style="padding-left: 30px;">DO#</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-2" class="collapse">
        <tr>
            <td style="padding-left: 50px;">Event 1</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
        <tr>
            <td style="padding-left: 50px;">Event 2</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
    </tbody>
</table>

我的问题是当我单击作为父行的 SO# 时，我想关闭 DO# 行以及事件 1、事件 2 行。但是现在当我单击 SO# 行时，它只会关闭 DO# 行，而不是 Event 1 和 Event 2。

我尝试使用

$("#group-of-rows-2 .collapse").collapse('hide');

但它没有用。

标签： javascripthtmltwitter-bootstraphtml-table

解决方案

我看到多个问题：

  • 您使用超过 1 次 tbody。它应该只使用1次
  • $("#group-of-rows-2 .collapse").collapse('hide');是不正确的。你在这里说元素与 id 为 group-of-rows-2 的元素中的类崩溃并且不存在。

  • 最好使用切换。例子：

    $(".clickable").click(function(){ $(".group-of-rows-1").toggle(); });

推荐阅读