[SOLUCIONADO] [HTML + JS] Mostrar tablas

Archivado
Duda sobre HTML/CSS/JS.

Estoy realizando una tabla con el siguiente aspecto:

|USUARIO   | CORREO   | INFO
|newton      | n@eol.us   | +
|fernando   | f@eol.us   | +
|simon      | s@eol.us   | +


Tras pulsar en un botón de +, despliego la información de ese usuario: (Utilizo JS para detectar en que fila me encuentro y así poder desplegar todos los datos de usuario; pero no consigo generar la tabla de manera correcta).

Desplegada tras pulsar en +
|USUARIO   | CORREO   | INFO
|newton      | n@eol.us   | -
|SEXO: 0   | OS: Unix    | GAFAS: 0
|COCHE: 0   | TELF: 0           | PC: 1
|fernando           | f@eol.us   | +
|simon      | s@eol.us   | +


Quiero mostrarlo en la misma página, añadiendo sobre la tabla que se muestra en pantalla, una nueva tabla embebida, que se muestre en función de si quiero detalles o no, no sé si realmente eso se puede hacer.

Si pulsará sobre distintas filas / usuarios, éstos se tendrían que despleglar. (No se pinta únicamente los detalles de uno).
Desplegada tras pulsar en +
|USUARIO   | CORREO   | INFO
|newton      | n@eol.us   | -
|SEXO: 0   | OS: Unix           | GAFAS: 0
|COCHE: 0   | TELF: 0           | PC: 1
|fernando           | f@eol.us   | +
|simon      | s@eol.us   | -
|SEXO:   0   | OS: Win           | GAFAS: 1
|COCHE: 1   | TELF: 1           | PC: 1


Lo estoy realizando con JS puro sin usar librerias de terceros tipo JQuery, Datatables etc; descarto meter una librería externa para algo puntual.

¿Algo de luz?
Después de cada <tr> podrías añadir otro con el atributo colspan=3 con la información completa del usuario y que esté oculto por defecto, de forma que cuando pulsas +, el siguiente <tr> se muestra.

Algo así: Cuando pulsas +, se añade la clase .mostrar al siguiente <tr>
<style>
.informacion-completa:not(.mostrar) {
  display: none;
}
</style>
...........
<tr class="informacion-basica"><td>newton</td><td>n@eol.us</td><td>+</td></tr>
<tr class="informacion-completa"><td colspan="3"> <table>...............</table> </td></tr>
<tr class="informacion-basica"><td>fernando</td><td>f@eol.us</td><td>+</td></tr>
<tr class="informacion-completa"><td colspan="3"> <table>...............</table> </td></tr>
<tr class="informacion-basica"><td>simon</td><td> s@eol.us</td><td>+</td></tr>
<tr class="informacion-completa"><td colspan="3"> <table>...............</table> </td></tr>
Lleva 10 años sin tocar JS, pero en aquella época me gustaba mucho.

¿Existe la tabla completa o cada vez que le das a + hay que recuperar esos datos y pintarlos?

Si solo quieres ocultar/mostar algunas filas, he hecho esto:

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="utf-8">
   
     <style type="text/css">
      .ocultar {
         visibility: collapse;
      }
      
      .boton {
         cursor: pointer;
      }
   </style>
   
   <script>
      function mostrarInformacion(id){         
         const
            idFilaInfo1 = "info_" + id + "_1",
            idFilaInfo2 = "info_" + id + "_2";
         
         const
            fila1 = document.getElementById(idFilaInfo1),
            fila2 = document.getElementById(idFilaInfo2);
            
                  
         if(fila1.classList.contains('ocultar')){ //Ver si se está mostrando o no (si contiene el estilo 'ocultar')
            fila1.classList.remove('ocultar');
            fila2.classList.remove('ocultar');
         }else{
            fila1.classList.add('ocultar');
            fila2.classList.add('ocultar');
         }         
      }
   </script>   
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>USUARIO</th>
            <th>CORREO</th>
            <th>INFO</th>
         </tr>
      </thead>
      <tbody>
      
         <tr>
            <td>newton</td>
            <td>n@eol.us</td>
            <td><span onclick="mostrarInformacion(1);" class="boton">+</span></td>            
         </tr>
         <tr id="info_1_1" class="ocultar">         
            <td>&nbspSEXO: 0</td>
            <td>OS: Unix</td>
            <td>GAFAS: 0</td>         
         </tr>
         <tr id="info_1_2" class="ocultar">         
            <td>COCHE: 0</td>
            <td>TELF: 0</td>
            <td>PC: 1</td>         
         </tr>
         
         <tr>
            <td>fernando</td>
            <td>f@eol.us</td>
            <td><span onclick="mostrarInformacion(2);" class="boton">+</span></td>            
         </tr>
         <tr id="info_2_1" class="ocultar">         
            <td>SEXO: 0</td>
            <td>OS: Unix</td>
            <td>GAFAS: 0</td>         
         </tr>
         <tr id="info_2_2" class="ocultar">         
            <td>COCHE: 0</td>
            <td>TELF: 0</td>
            <td>PC: 1</td>         
         </tr>         
         
         <tr>
            <td>simon</td>
            <td>s@eol.us</td>
            <td><span onclick="mostrarInformacion(3);" class="boton">+</span></td>            
         </tr>
         <tr id="info_3_1" class="ocultar">         
            <td>SEXO: 0</td>
            <td>OS: Unix</td>
            <td>GAFAS: 0</td>         
         </tr>
         <tr id="info_3_2" class="ocultar">         
            <td>COCHE: 0</td>
            <td>TELF: 0</td>
            <td>PC: 1</td>         
         </tr>
      </tbody>
   </table>
</body>
</html>


Básicamente es tener un estilo que permita ocultar elementos, y con JS se lo aplicamos o quitamos a las filas.

En + se llama a una función JS que recibe un id, y con él sabemos qué tenemos que buscar.

Si lo que quieres es llamar al servidor vía AJAX, lo único que cambiaría sería que en la función JS tendrías que construir un HTML e inyectarlo con innerHTML justo después del TR que se haya clicado.
Solucionado, gracias a ambos ;)
3 respuestas
Archivado
Volver a General