我怎样才能折叠所有表格行

Question

我在表内有表行，在每行内还有另一个嵌套表行，我的问题是我可以在嵌套表行中折叠和展开，但是当我尝试在主表中展开时，只有第一行展开当我启动程序时，其余部分默认展开，我该如何修复它。

这是我的代码

tbody.collapse.in {

  display: table-row-group;

}

.tigray {

  background-color: darkcyan;

}

.zoba {

  background-color: forestgreen;

}

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-bordered table-sm ">

  <thead class="thead-dark">

    <tr>

      <th></th>

      <th>head1</th>

      <th>head2</th>

    </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 class="tigray">title1</td>

      <td class="tigray">35</td>

      <td class="tigray">35</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 class="zoba">nested 1</td>

      <td class="zoba">29</td>

      <td class="zoba">29</td>

      <tbody id="group-of-rows-2" class="collapse">

        <tr class="table-warning">

          <td>nested title1</td>

          <td>13</td>

          <td>13</td>

        </tr>

        <tr class="table-warning">

          <td>nested title2</td>

          <td>18</td>

          <td>13</td>

        </tr>

        <tr class="table-warning">

          <td>nested title 3</td>

          <td>32</td>

          <td>13</td>

        </tr>

      </tbody>

    </tr>

Answer 1

您不能在另一个 tbody 中使用 tbody， 它不是合法的 HTML。按照这个代码 ↓↓<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><table class="table table-bordered table-sm ">  <thead class="thead-dark">    <tr>      <th></th>      <th>head1</th>      <th>head2</th>    </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 class="tigray">title1</td>      <td class="tigray">35</td>      <td class="tigray">35</td>    </tr>  </tbody>  <tbody id="" class="collapse group-of-rows-1">    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">      <td class="zoba">nested 1</td>      <td class="zoba">29</td>      <td class="zoba">29</td>          </tr>  </tbody>  <tbody id="group-of-rows-2" class="collapse">      <tr class="table-warning">        <td>nested title1</td>        <td>13</td>        <td>13</td>      </tr>      <tr class="table-warning">        <td>nested title2</td>        <td>18</td>        <td>13</td>      </tr>      <tr class="table-warning">        <td>nested title 3</td>        <td>32</td>        <td>13</td>      </tr>    </tbody>  <tbody id="" class="collapse group-of-rows-1">    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">      <td class="zoba">nested 2</td>      <td class="zoba">29</td>      <td class="zoba">29</td>          </tr>    </tbody>  <tbody id="group-of-rows-3" class="collapse">      <tr class="table-warning">        <td>nested title4</td>        <td>13</td>        <td>13</td>      </tr>      <tr class="table-warning">        <td>nested title5</td>        <td>18</td>        <td>13</td>      </tr>      <tr class="table-warning">        <td>nested title 6</td>        <td>32</td>        <td>13</td>      </tr>    </tbody></table>但是，您可以在单个 TABLE 元素中拥有多个 TBODY 元素，因此您可以执行以下操作：<table>   <tbody>     <tr>       <td>...</td>       <td>...</td>     </tr>   </tbody>  <tbody >     <tr>       <td>...</td>       <td>...</td>     </tr>   </tbody>  <tbody>     <tr>       <td>...</td>       <td>...</td>     </tr>   </tbody></table>