5

He generado una tabla y ahora me gustaria que cuando le diese a un boton pudiera recuperar cada fila de la tabla para poder almacenarla.

<table id="asistencias" class="table">
        <thead class="thead-dark">
            <tr>
                <th>Nombre</th>
                <th>Habitual</th>
                <th>Fichar</th>
            </tr>
        </thead>
       <tbody>
           <tr>
              <td>Raul</td>
              <td>x</td>
              <td><input id="55" type="checkbox" checked=""></td>
           </tr>
            <tr>
              <td>Paco</td>
              <td>x</td>
              <td><input id="5" type="checkbox" checked=""></td>
           </tr>
      </tbody>
</table>

En este caso solo tengo 2 filas pero seria para varias filas a obtener. Y no se como poder realizar esto.

4
  • 1
    ¿Qué datos de la fila quieres recuperar? ¿Solo si está o no marcada la fila? ¿Y a referencia de qué? ¿Del nombre Raul o de un identificador de clave primaria de la base de datos? ¿Cómo generas ese HTML? ¿Podrías compartir el código para indicarte cómo enviar los datos necesarios para poder relacionar posteriormente los datos de las filas con los de la base de datos? el 20 feb. 2020 a las 13:22
  • Me gustaria recuperar el nombre y si esta check que le podre una id que sera la id del usuario. el 20 feb. 2020 a las 13:28
  • Pues entonces edita la pregunta y agrega la parte donde vas a poner la id del usuario. el 20 feb. 2020 a las 13:29
  • Podrías explicarte mejor, ya que no me es muy claro que es lo que quieres hacer. el 20 feb. 2020 a las 13:37

2 respuestas 2

6

Para obtener datos de una tabla puedes realizar una búsqueda por selector o de cualquier otro tipo, iterando por filas y luego por columnas:

let atributos = [];
document.querySelectorAll('#asistencias thead th').forEach(elemento => {
  atributos.push(elemento.innerText);
});
let datos = [];
/* Iteramos por cada fila */
document.querySelectorAll('#asistencias tbody tr').forEach(fila => {
  /* Rellenamos los campos con datos vacíos */
  let dato = {};
  atributos.forEach(campo => { dato[campo] = ''; });
  /* Iteramos por cada columna */
  fila.querySelectorAll('td').forEach((elemento, n) => {
    let input = elemento.querySelector('input');
    /* Si tiene un input almacenamos su valor */
    if (input !== null) {
      dato[atributos[n]] = input.checked;
      dato.id = input.id;
    } else {
      dato[atributos[n]] = elemento.innerText;
    }
  });
  datos.push(dato);
});
console.log(datos);
<table id="asistencias" class="table">
  <thead class="thead-dark">
    <tr>
      <th>Nombre</th>
      <th>Habitual</th>
      <th>Fichar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Raul</td><td>x</td><td><input id="55" type="checkbox" /></td>
    </tr>
    <tr>
      <td>Paco</td><td>x</td><td><input id="5" type="checkbox" checked="" /></td>
    </tr>
    <tr>
      <td>José</td><td>x</td><td><input id="7" type="checkbox" /></td>
    </tr>
  </tbody>
</table>

En este código hago una pasada previa por cada columna del encabezado para averiguar qué contiene cada columna y así poder asignar a cada fila una propiedad en la clase dato en vez de índices numéricos.

0

que lenguaje de programación estas usando? Puedes usar los métodos get o post:

ej: Por ejemplo en PHP seria:

<form action="index.php" method="post">
 <p>Su nombre: <input type="text" name="nombre" /></p>
 <p>Su edad: <input type="text" name="edad" /></p>
 <p><input type="submit" /></p>
</form>

Y para mostrar información de nuestro formulario:

Hola <?php echo htmlspecialchars($_POST['nombre']); ?>.
Usted tiene <?php echo (int)$_POST['edad']; ?> años.

O también puedes meter la información en variables:

$nombre = $_POST['nombre'];
$edad = $_POST['edad'];

El action del formulatio significa a donde queremos enviar la información del formulario.

Espero que esta información te haya sido de ayuda! Un saludo;)

1
  • En la etiqueta pone claramente que es javascript...
    – Capt.Teach
    el 2 mar. 2020 a las 7:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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