HTML表，带有多级组/collapse -默认为collapse

Question

我试图使一个HTML表与一个多层次的行组/崩溃，默认情况下是崩溃的+父母。Group1

和+ SubGroup1当打开+ parents时默认折叠。Group1.

多级行组/collapse示例

tbody> <<tr>

一个标头	另一个标头
+ Parnts.Group1	+ Parnts.Group1
+ SubGroup1。	+ SubGroup1
- text	- text

经过几个小时的尝试和测试，我终于找到了一个解决方案。它并不完美，还可以做得更好。

$(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>