1

Tengo una tabla HTML con un id llamado "tabla-de-datos-body", y tengo un arreglo de datos llamado "Datos" , a través de inputs lleno ese arreglo, el arreglo se llena correctamente pero a la hora de querer imprimir los datos en la tabla sale de la siguiente manera:

introducir la descripción de la imagen aquí

Y necesito que se despliegue en linea recta, el primera dato en producto, el segundo en cantidad y el tercero en precio, mi arreglo lo recorro con la siguiente función de javascript:

function addProdsTemp() {

    var tabladatos = document.getElementById('tabla-de-datos-body');
    let datos = [];

    var producto = document.getElementById('producto').value;
    var cantidad = document.getElementById('cantidad').value;
    var precio = document.getElementById('precio').value;

    datos.push(producto, cantidad, precio);

    datos.forEach((el, index) => {
       tabladatos.innerHTML += "<tr><td>"+ el +"</td></tr>";
    });
}

Mi maquetación HTML de la tabla es la siguiente:

<table class="table">
   <thead>
      <tr>
         <th scope="col">Producto</th>
         <th scope="col">Cantidad</th>
         <th scope="col">Precio</th>
      </tr>
   </thead>
   <tbody id="tabla-de-datos-body">
   </tbody>
</table>

¿Cómo podría imprimir esos datos en la tabla en linea recta?

3
  • y el tbody? no creo que un tr pueda ser hijo directo de table. Estructuralmente creo que es <table><thead/><tbody/><tfoot/></table>. Tal vez quieras leer un poco más acerca de las tablas en MDN
    – Arriel
    el 28 oct. 2022 a las 17:43
  • En donde se ubica el id "tabla-de-datos-body"? Muéstranos tu código html de tu tabla, posiblemente haya un error de etiquetas. el 28 oct. 2022 a las 17:45
  • Adjunto el código de la tabla para que valides el HTML, los datos son: datos['1','2','3']; el 28 oct. 2022 a las 18:14

1 respuesta 1

1

A cada push que hagas en tu arreglo, deberías ingresar a las posiciones de sus elementos para cada ciclo que realices. Para esto, tendrías que iterar el arreglo e ingresar a dichas posiciones, yo utilizaría ciclo for. Tu código sería el siguiente:

function addProdsTemp() {

  var tabladatos = document.getElementById('tabla-de-datos-body');
  let datos = [];

  var producto = document.getElementById('producto').value;
  var cantidad = document.getElementById('cantidad').value;
  var precio = document.getElementById('precio').value;

  datos.push(producto, cantidad, precio);

  for (let i = 0; i < 1; i++) {
    tabladatos.innerHTML += "<td>" + datos[i++] + "</td>" + "<td>" + datos[i++] + "</td>" + "<td>" + datos[i++] + "</td>";
  }
}
<span>Producto:</span></br>
<input id="producto" type="text">
</br>
<span>Precio:</span></br>
<input id="cantidad" type="number">
</br>
<span>Cantidad:</span></br>
<input id="precio" type="number">
</br></br>
<button onclick="addProdsTemp()">Agregar</button>

<table class="table">
   <thead>
      <tr>
         <th scope="col">Producto</th>
         <th scope="col">Cantidad</th>
         <th scope="col">Precio</th>
      </tr>
   </thead>
   <tbody id="tabla-de-datos-body">
   </tbody>
</table>

1
  • 1
    Excelente, es la solución que estaba buscando! , gracias Cris. el 28 oct. 2022 a las 18:58

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.