Javascript Bootstrap 3 - 展开和折叠表格行

Bootstrap 3 - Expanding and Collapsing Table Rows

提问by Gary

I have a tablein a web page with Bootstrap. This tablehas rows that I want to expand/collapse. It is intended to act like a hierarchy. You can see the tablein this Bootply. You can see that it successfully expands / collapses the "grandparent" content. However, it doesn't expand/collapse each "parent" element's content as needed.

我有一个table带有 Bootstrap 的网页。这table有我想要展开/折叠的行。它旨在表现得像一个层次结构。你可以table在这个Bootply 中看到。可以看到它成功地展开/折叠了“祖父”内容。但是，它不会根据需要展开/折叠每个“父”元素的内容。

How do I expand / collapse the child rows in this table? Here is my HTML:

如何在此展开/折叠子行table？这是我的 HTML：

<div class="list-group-item" id="grandparent">
    <div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

回答by Irfan Ali

Here is working example with based on classes Demo

这是基于类Demo 的工作示例

This will show all matched childs.

这将显示所有匹配的孩子。

回答by Kiran Dash

Demo

演示

You must add the data-target="#collapseContent1" data-toggle="collapse"attributes to Parent 1 and Parent 2 just like you have done it for Grandparent.

您必须将data-target="#collapseContent1" data-toggle="collapse"属性添加到 Parent 1 和 Parent 2，就像您为祖父母所做的那样。

And then give the id to target.

然后将 id 提供给目标。

<div class="list-group-item" id="grandparent">
    <div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr >
            <td data-target="#collapseContent1" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse" id="collapseContent1" aria-expanded="true">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>               

          <tr>
            <td data-target="#collapseContent2" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse" id="collapseContent2" aria-expanded="true">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>         
        </tbody>
      </table>
    </div>
</div>

But you won't get animation for tr elements.

但是你不会得到 tr 元素的动画。

This appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. But if you are still looking for a workaround here is a demo that might help:

这似乎是动画 tr 元素的一个长期存在的问题 - 我的建议是不要这样做。但是，如果您仍在寻找解决方法，这里有一个可能有帮助的演示：

DEMO

演示