2

Necesito crear una tabla que al darle click en la fila se abran otras filas; y al darle click a estas filas, se abran más. La primera parte me sale bien, pero el otro nivel no me sale bien, solo se queda dentro una parte y la otra parte se crea fuera.

Les dejo mi código:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th align="center">CUMPLIMIENTO (%)</th>
        <th align="center">NO CUMPLIMIENTO (%)</th>
      </tr>
    </thead>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1">
      <td><i class="fa fa-plus" aria-hidden="true"></i></td>
      <td align="center">COCINAS A GAS</td>
      <td align="center">63.97</td>
      <td align="center">36.03</td>
    </tr>
    <tbody id="group-of-rows-1" class="collapse">
      <tr>
        <td></td>
        <td align="center">Campo / Carpa
          <td>
            <td align="center">0.40</td>
      </tr>
      <tr>
        <td></td>
        <td align="center">No hay stock
          <td>
            <td align="center">7.69</td>
      </tr>
      <tr class="clickable" data-toggle="collapse" data-target="#group-of-cau-1">
        <td></td>
        <td align="center">Se encuentra en otro lugar exhibido
          <td>
            <td align="center">25.51</td>
      </tr>
      <tbody id="group-of-cau-1" class="collapse">
        <tr>
          <td>Solucionado</td>
          <td>data 1</td>
          <td>data 1</td>

        </tr>
        <tr>
          <td>No Solucionado</td>
          <td>data 1</td>
          <td>data 1</td>

        </tr>
      </tbody>
      <tr class="clickable" data-toggle="collapse" data-target="#group-of-cau-2">
        <td></td>
        <td align="center">Stock en almacén
          <td>
            <td align="center">2.43</td>
      </tr>
      <tbody id="group-of-cau-2" class="collapse">
        <tr>
          <td>Solucionado</td>
          <td>data 1</td>
          <td>data 1</td>

        </tr>
        <tr>
          <td>No Solucionado</td>
          <td>data 1</td>
          <td>data 1</td>

        </tr>
      </tbody>
    </tbody>
  </table>

</body>

</html>

Por lo que he revisado el error es que dentro de un tbody no me acepta otro tbody y por eso como podrán ver me sale otro tbody pero fuera.

2 respuestas 2

1

Una manera de solucionar el problema (que solo serviría con dos niveles de colapsado) sería reagrupar los <tbody> y <tr> para organizar mejor el código (y ya de paso que sea HTML válido). Así la organización se haría de la siguiente manera:

  • El primer nivel de colapsado de la tabla irá dentro de los <tbody>. Tendrías al menos dos <tbody>: uno para la fila de "cabecera" (la que se pulsa) y otro para el grupo de filas a mostrar/ocultar.
  • El segundo nivel de colapsado no puedes hacerlo con un <tbody> dentro de otro, se va a aplicar directamente a las filas. Identificarás las filas a mostrar/ocultar con una clase especial (en lugar de usar un id).

Así para el primer nivel de colapsado puedes seguir usando los id (p.e. data-target="#group-of-rows-1"), pero para el segundo nivel de colapsado usarás clases (p.e. data-target=".group-of-cau-1").

Aquí puedes ver el código funcionando:

Nota: he añadido un <td> a las filas que tenían 3 en lugar de 4, y he añadido los </td> a las celdas que no lo tenían. Esto no es necesario para

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-responsive table-hover">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th align="center">CUMPLIMIENTO (%)</th>
      <th align="center">NO CUMPLIMIENTO (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1">
      <td><i class="fa fa-plus" aria-hidden="true"></i></td>
      <td align="center">COCINAS A GAS</td>
      <td align="center">63.97</td>
      <td align="center">36.03</td>
    </tr>
  </tbody>
  <tbody id="group-of-rows-1" class="collapse">
    <tr>
      <td></td>
      <td align="center">Campo / Carpa</td>
      <td></td>
      <td align="center">0.40</td>
    </tr>
    <tr>
      <td></td>
      <td align="center">No hay stock</td>
      <td></td>
      <td align="center">7.69</td>
    </tr>
    <tr class="clickable" data-toggle="collapse" data-target=".group-of-cau-1">
      <td></td>
      <td align="center">Se encuentra en otro lugar exhibido</td>
      <td></td>
      <td align="center">25.51</td>
    </tr>
    <tr class="group-of-cau-1 collapse">
      <td></td>
      <td>Solucionado</td>
      <td>data 1</td>
      <td>data 1</td>
    </tr>
    <tr class="group-of-cau-1 collapse">
      <td></td>
      <td>No Solucionado</td>
      <td>data 1</td>
      <td>data 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-cau-2">
      <td></td>
      <td align="center">Stock en almacén</td>
      <td></td>
      <td align="center">2.43</td>
    </tr>
  </tbody>
  <tbody id="group-of-cau-2" class="collapse">
    <tr>
      <td></td>
      <td>Solucionado</td>
      <td>data 1</td>
      <td>data 1</td>
    </tr>
    <tr>
      <td></td>
      <td>No Solucionado</td>
      <td>data 1</td>
      <td>data 1</td>
    </tr>
  </tbody>
</table>

1

Para anidar tablas la forma correcta es por ejemplo colocar

<Table>
  <tbody>
    <tr>
      <td>
        <Table>
          <tbody>

Siempre los anidados dentro de un td, espero te sirva, saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.