HTML 表格，具有多级组/折叠 - 默认折叠

Question

我正在尝试创建一个具有多级行组/折叠的 HTML 表格，加载页面时默认折叠为 +Parnts.Group1。

并在打开+Parnts.Group1时默认折叠+ SubGroup1。

多级行分组/折叠示例

A header	Another header
+Parnts.Group1	+Parnts.Group1
+ SubGroup1.	+ SubGroup1
- text	- text

我发现的都是只有一层的表。

我搜索了很多解决方案，但代码每次都不一样，所以我无法弄清楚，因为我不是编码专家。

另外，出于同样的原因，我无法将 + - 添加到 JS 中的组中。

这是我的代码

JS - CSS - HTML

var toggle_rows = function (element, parent) {
    if ($(element).closest("tr").attr("state") == "opened") {
        $("tr[parent~='" + parent + "']").each(function (i, obj) {
            toggle_child_rows(obj, false);
        });
        $("tr[parent~='" + parent + "']").hide();
        $(element).closest("tr").attr("state", "collapsed")
    } else {
        $("tr[parent~='" + parent + "']").each(function (i, obj) {
            toggle_child_rows(obj, true);
        });
        $("tr[parent~='" + parent + "']").show();
        $(element).closest("tr").attr("state", "opened");
    }
};

var toggle_child_rows = function (obj, willShow) {
    var name = null;
    if ($(obj).attr("state") === "leaf") {
        return;
    } else {
        name = $(obj).attr("rowname");
        if ($(obj).attr("state") === "opened" && !willShow) {
            $("tr[parent~='" + name + "']").each(function (i, elem) {
                toggle_child_rows(elem, willShow);
                $(elem).hide();
            });
        } else if ($(obj).attr("state") === "opened" && willShow) {
            $("tr[parent~='" + name + "']").each(function (i, elem) {
                toggle_child_rows(elem, willShow);
                $(elem).show();
            });
        }
    }
};

<CSS>

table {
  border-collapse:collapse;
  margin: 150px auto;
  table-layout: fixed;
  width: 750px;
  word-wrap: break-word;
  cursor: pointer;
    }

.name {
    text-align: center;
}

 th, td {
    border:1px solid #DDD;
}

th {
    cursor: pointer;
    background-color: #006098;
     color:white;
     position:center;
    
}

.level1 {
    cursor: pointer;
    background-color: #00C1C1;


}

.level2 {
    cursor: pointer;
    background-color: gray;

}

.level3 {
    cursor: pointer;
    background-color: #eaeaea;
}


.level4 {
    cursor: pointer;
    background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table table-hover table-bordered table-condensed cashflow_report'>
    <thead>
        <tr>
            <th width="150px" class='name'></th>
            <th width="300px" >Header1</th>
            <th width="300px" >Header2</th>
   
        </tr>
    </thead>
    
   
    
 <tbody>
  <tr class='level1' rowname='inflow' state='opened'>
    <td class='name'>   <span onclick="toggle_rows(this, 'inflow');">
        + Parnts.Group1 </span>  </td>

    <td class='name'>   <span onclick="toggle_rows(this, 'inflow');">
      test  </span>  </td>
    <td class='name'>   <span onclick="toggle_rows(this, 'inflow');">
      test  </span>  </td>  
 </tbody>
    
    
 <tbody >
     <tr class='level2' parent='inflow' rowname='in-ct-1' state='opened'>
     
     <td class='name'>  <span onclick="toggle_rows(this, 'in-ct-1');">
                    &nbsp; + Group 1  </span></td>
            <td>0</td>
            <td>0</td>
            </tr>
        
        
     <tr class='level3'  parent='in-ct-1' rowname='in-tt-1' state='opened'>
     <td class='name'>  <span onclick="toggle_rows(this, 'in-tt-1');">
                    &nbsp;&nbsp;+ Subgroup 1    </span></td>
            <td>0</td>
            <td>0</td>
            </tr>
        
     <tr class='level4' parent='in-tt-1' state='leaf'>
            <td class='name'>&nbsp;&nbsp;&nbsp;Operation 1</td>
            <td>0</td>
            <td>0</td>
            </tr>
        
     <tr class='level3' parent='in-ct-1' rowname='in-tt-2' state='opened'>
            <td class='name'>   <span onclick="toggle_rows(this, 'in-tt-2');">
                    &nbsp;&nbsp;Subgroup 2</span></td>
            <td>0</td>
            <td>0</td>
            </tr>
       
       <tr parent='in-tt-2' state='leaf'>
            <td class='name'>&nbsp;&nbsp;&nbsp;Operation 2</td>
            <td>0</td>
            <td>0</td>
        </tr>
</tbody>

</table>

Answer 1

经过数小时的尝试和测试，我终于找到了解决方案。 它并不完美，它可能会更好。 但它有效。

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
  
});








$(document).ready(function() {

  //add a class to track expanded / collapsed (for CSS styling)
  $('.heading').addClass('hCollapsed');


  $(".heading").click(function() {
    //#heading is a cell, so go up to the parent, which is the first tr.  Toggle the hide/show status of those rows.
    $(this).parent().siblings().toggle();
    //then adjust the classes accordingly (for CSS styling)
    if ($(this).hasClass('hCollapsed')) {
      $(this).removeClass('hCollapsed').addClass('hExpanded');
    } else {
      $(this).removeClass('hExpanded').addClass('hCollapsed');
    }

  });
});

table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
}

[data-toggle="toggle"] {
  display: none;
}

label {
  display: block;

}

th{
 background-color: #006098;
 color:white;
 
}

.level1{
background-color: #00C1C1;
color:white;
}

.level2{
  background-color: #eaeaea;

}

hide {
  display: block;

}


.hCollapsed::before {
  content: " +  ";
  color:blue;
}

.hExpanded::before {
  content: " -  ";
    color:red;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>  
  <tbody>
  
  
  
  <!-- 1 -->

<tbody class="level1">
 <tr >
 <td    colspan="2"  >
 <label for="parents"  class="heading" > 1 </label>
<input type="checkbox" id="parents" data-toggle="toggle">
  </td>
  </tr>
  </tbody>
    

  <!-- 1.1 -->


    <tbody class="hide"  >
     <tr class="level2">
     <td> 
     <label for="sub1"   >1.1   </label>
    <input type="checkbox" id="sub1" data-toggle="toggle">
     </td>
     
       <td> 
     <label for="sub1" >  100  </label>
    <input type="checkbox"  data-toggle="toggle">
     </td>
     
          </tr>


          <tr class="hide">
                   <td > 1.1.1 </td>
                   <td>300</td>
                </tr>


  <!-- 1.2 -->

      
      
      
    <tr class="level2">
    <td> <label for="sub2"   >1.2</label>
    <input type="checkbox" id="sub2" data-toggle="toggle">
    </td>
     
       <td> <label for="sub2"   >  100  </label>
    <input type="checkbox" data-toggle="toggle">
    </td>
     
 
     </tr>      
      
      
          <tr class="hide">
          <td > 1.2.1 </td>
          <td>30hhh0</td>
                </tr>
                
                
    <!-- 1.3 -->
    
      
    <tr class="level2">
    <td>
    <label for="sub3"   >1.3</label>
    <input type="checkbox" id="sub3" data-toggle="toggle">
     </td>
     
        <td>
    <label for="sub3" >  500 </label>
    <input type="checkbox"  data-toggle="toggle">
     </td>
     
    </tr>      

      
          <tr class="hide">
          <td > 1.3.1 </td>
          <td>jjjj</td>
          </tr>
      
    </tbody>
    
    
    
    

<!-------------------- 2 ---------------->
  
    
   <tbody class="level1">
   <tr>
   <td colspan="2">
   <label for="parents2" class="heading" >2</label>
   <input type="checkbox" id="parents2" data-toggle="toggle">
   </td>
   </tr>
   </tbody>
    
   <!-- 2.1 -->
 

<tbody class="hide"  >
    
 <tr class="level2">
 <td> 
 <label for="Sub1"  >2.1</label>
 <input type="checkbox" id="Sub1" data-toggle="toggle">
 </td>
 
  <td> 
 <label for="Sub1"  >2.1</label>
 <input type="checkbox"  data-toggle="toggle">
 </td>
 
      </tr>


<tr class="hide">
 <td > 2.1.1 </td>
 <td>300</td>
 </tr>
      
   <!-- 2.2 -->
   
      
 <tr class="level2">
 <td> 
 <label for="Sub2" >  2.2  </label>
<input type="checkbox" id="Sub2" data-toggle="toggle">
 </td>
 
  <td> 
 <label for="Sub2" >  2.2  </label>
<input type="checkbox" data-toggle="toggle">
 </td>
 </tr>      
      
      
  <tr class="hide">
  <td > 2.2.1 </td>
  <td>678</td>
  </tr>
      
      
 <!--  -->
     
      
    </tbody>