Función para hacer que los tr de la tabla sean plegables
$('.table td.collapsible').on('click',function(e){
e.preventDefault();
const node = $(this);
node.toggleClass("expand");
const childData = node.attr('data-colapse');
const childClass = childData+'_child';
const child = $('.'+childClass);
node.find('i').toggleClass('fas fa-angle-up fas fa-angle-down');
if(node.hasClass('expand')){
const colorTr = getColorPastel();
child.show();
child.each(function(){
const el = $(this);
el.css('background-color',colorTr);
})
}else{
child.hide();
child.each(function(){
const el = $(this);
const tdColapse = el.children('td.collapsible');
if(tdColapse.length > 0 && tdColapse.hasClass('expand')){
// const childDataLevel = tdColapse.attr('data-colapse');
// const childClassLevel = childDataLevel+'_child';
// const childLevel = $('.'+childClassLevel);
tdColapse.click();
}
})
}
});Lenguaje del código: JavaScript (javascript)Si se quiere utilizar para versiones mas antiguas de navegadores cambiar const por var
Y la tabla tiene que tener el siguiente formato, como se puede ver puede trabajar con diferentes niveles.
El numero colapse_parent_16 tiene que ser unico para cada padre.
<table class="table">
<tbody>
<tr>
<td class="collapsible pointer" data-colapse="colapse_parent_16"> <i class="fas fa-angle-down"></i> </td>
<td>Parent 16</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="colapse_parent_16_child" style="display:none;">
<td></td>
<td>-Child parent 16</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="colapse_parent_16_child" style="display:none;">
<td></td>
<td>-Child parent 16</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="colapse_parent_16_child" style="display:none;">
<td class="collapsible pointer" data-colapse="colapse_parent_17"> <i class="fas fa-angle-down"></i> </td>
<td>-Child parent 16 AND Parent 17</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="colapse_parent_17_child" style="display:none;">
<td></td>
<td>--Child parent 17</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="colapse_parent_17_child" style="display:none;">
<td></td>
<td>--Child parent 17</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Normal</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Normal 2</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>