使用jQuery的可折疊表格行

Question

我正在尋找一種使表行可折疊或擴展為多個級別的方法。 默認視圖應該折疊（也許可以顯示級別0和1？）

這就是我現在從另一個問題的答案中收集到的信息。

<table>
      <tr class="header">
        <th>A</th>
        <th>B</th>
         </tr>
      <tr class="level_0" id="10">
        <td>10</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_10" id="11">
        <td>10.1</td>
        <td>Level 1</td>
      </tr>
     <tr class="level_1 parent_10" id="12">
        <td >10.2</td>
        <td>Level 1</td>
      </tr>
      <tr class="level_2 parent_12" id="13">
        <td>10.2.1</td>
        <td>Level 2</td>
   </tr>
   <tr class="level_0" id="20">
        <td>20</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_20" id="21">
        <td>20.1</td>
        <td>Level 1</td>
      </tr>
  </table>

JavaScript：

if (typeof jQuery === 'undefined') throw "jQuery Required";

jQuery(function ($) {
    var treeTable = {
        parentClassPrefix : '',
        collapsedClass : 'collapsed',
        init : function(parentClassPrefix) {
            this.parentClassPrefix = parentClassPrefix;
            $('table').on('click', 'tr', function () { 
                treeTable.toggleRowChildren($(this));
            });
        },
        toggleRowChildren : function(parentRow) {
            var childClass = this.parentClassPrefix+parentRow.attr('id');
            var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
            childrenRows.toggle();
            childrenRows.each(function(){
                if (!$(this).hasClass(treeTable.collapsedClass)) {
                    treeTable.toggleRowChildren($(this));
                }
            });
            parentRow.toggleClass(this.collapsedClass);
        }
    };

    treeTable.init('parent_');
});

Answer 1

這樣的事情-如果我花更多的時間看一下，可能會做得更好。 但這只是一個簡單的例子。

 $(document).ready(function() { $(".level_0").each(function() { console.log("IN HERE"); $(this).nextUntil('tr.level_0').toggle(); }); }); $(document).on("click", '.level_0', function() { $(this).nextUntil('tr.level_0').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table> <tr class="header"> <th>A</th> <th>B</th> </tr> <tr class="level_0" id="10"> <td>10</td> <td> Level 0</td> </tr> <tr class="level_1 parent_10" id="11"> <td>10.1</td> <td>Level 1</td> </tr> <tr class="level_1 parent_10" id="12"> <td >10.2</td> <td>Level 1</td> </tr> <tr class="level_2 parent_12" id="13"> <td>10.2.1</td> <td>Level 2</td> </tr> <tr class="level_0" id="20"> <td>20</td> <td> Level 0</td> </tr> <tr class="level_1 parent_20" id="21"> <td>20.1</td> <td>Level 1</td> </tr> </table>