0

tengo un pequeño problemita con un proyecto en el que estoy trabajando. Resulta que necesito capturar los datos de una tabla html que el usuario crea dinamicamente y al hacer click en "Guardar datos" necesito guardarlos en un array Esta es mi tabla: introducir la descripción de la imagen aquí

se como capturar los valores de cada celda, pero no puedo guardarlo en el array, seguro estoy haciendo algo malo, intente esto:

var i
for (i=1;i<=cantfilas;i++) {
 codigoarray[i] = document.getElementById('tabla').tBodies[0].rows[1].cells[0].innerHTML;}

Agradezco de antemano la ayuda

3
  • 1
    Si puedes poner la estructura en html de tu tabla seria mucho mejor para poder ayudarte. De momento puedo decirte que tal vez si usaras la variable i dentro del arreglo rows, tomarias cada celda. codigoarray[i] = document.getElementById('tabla').tBodies[0].rows[i].cells[0].innerHTML; el 11 oct. 2018 a las 13:19
  • 1
    Si usas jQuery puedes utilizar la libreria jquery.tabletojson
    – Killbunny
    el 11 oct. 2018 a las 13:31
  • Daniel, lo de la variable i fue mi error al copiar el codigo aqui, Gracias por tu comentario, al final pude solucionar el inconveniete, olvide no declare el array como global. SALUDOS!
    – Diego Arce
    el 11 oct. 2018 a las 13:33

2 respuestas 2

3

Lo mejor es asignarle un nombre de clase a cada columna de la tabla, y extraer los valores iterando las filas de la tabla para asignar los valores al arreglo. Algo así:

let materiales = [];

document.querySelectorAll('.tabla-materiales tbody tr').forEach(function(e){
  let fila = {
    codigo: e.querySelector('.codigo').innerText,
    material: e.querySelector('.material').innerText,
    cantidad: e.querySelector('.cantidad').innerText,
    magnitud: e.querySelector('.magnitud').innerText
  };
  materiales.push(fila);
});

console.log(materiales);
<table class="tabla-materiales">
  <thead>
    <th>Codigo</th>
    <th>Material</th>
    <th>Cantidad</th>
    <th>Magnitud</th>
  </thead>
  <tbody>
    <tr>
      <td class="codigo">1</td>
      <td class="material">Ladrillo Común</td>
      <td class="cantidad">50</td>
      <td class="magnitud">un</td>
    </tr>
    <tr>
      <td class="codigo">2</td>
      <td class="material">Arena Lavada</td>
      <td class="cantidad">2</td>
      <td class="magnitud">m3</td>
    </tr>
    <tr>
      <td class="codigo">3</td>
      <td class="material">Murokal de 5 Lts</td>
      <td class="cantidad">1</td>
      <td class="magnitud">un</td>
    </tr>
  </tbody>
</table>

2
  • Gracias por tu comentario Niche, eres un genio la verdad, tu codigo es mucho mas pulcro que la forma en que yo lo hice, la verdad, logré que funcione, pero ya no lo cambiare. Guardare tu codigo para usarlo en proyectos posteriores. Un saludo
    – Diego Arce
    el 11 oct. 2018 a las 21:05
  • ¡Gracias por tu comentario!
    – Niche
    el 11 oct. 2018 a las 21:06
1

No entiendo bien si tienes problemas en buscar la cantidad de items en la tabla o guardar los datos por columna. Si el caso es por las columnas podrias crear un objeto JavaScript "{columna0:0, columna1:0}" y guardar este objeto en el array

codigoarray.push({columna0:0,columna1:0}).

En todo caso veo que tienes unos input podrias realizar esto desde la accion del boton "Ok" que muestras en la imagen o podrias usar un plugin Jquery muy bueno que lo he utilizado para manipular tablas.

DataTables

1
  • Gracias por tu tiempo, ya solucione el problema, resulta que no habia declarado el array como global, error mio. Esta bien el codigo, SALUDOS!!
    – Diego Arce
    el 11 oct. 2018 a las 13:31

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.