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(); } }) } });
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>