Table tr collapsible Jquery

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>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Captcha cargando...