0

He creado un array bidimensional en el cual se van añadiendo productos. Bien, pretendo crear otra funcion para poder recorrer dicho array e ir insertando los datos en una tabla HTML. Pero no se como seguir...

   function añadirProducto(){
            productos = new Array();
            elementos = parseInt(prompt("¿ Cuantos productos quieres añadir ?"));
            for (var i = 0; i < elementos; i++) {
                id_producto = prompt("Introduce el id del producto: ");
                producto = prompt("Introduce el nombre de producto: ");
                cantidad = parseInt(prompt("Introduce la cantidad: "));
                precio = parseFloat(prompt("Introduce el precio: "));

                productos.push(new Array(id_producto,producto,cantidad,precio));
            }

            return productos;
        }

function generar_tabla(){
            productos = añadirProducto();

            for (var i = 0; i < productos.length; i++) {
                for (var j = 0; j < productos[i].length; j++) {

                }
            }
        }

Ya no se como seguir en la funcion generar tabla para obtener la tabla en HTML...

1 respuesta 1

3

Para generar el HTML lo más fácil es crearte una variable e ir asignando el HTML como string.

Te dejo aquí el ejemplo (no lo he metido en una función pero sería fácil hacerlo). He cambiado también para que en vez de trabajar con un array dentro de otro trabajes con un array de objetos.

function añadirProducto(){
            productos = new Array();
            elementos = parseInt(prompt("¿ Cuantos productos quieres añadir ?"));
            for (let i = 0; i < elementos; i++) {
                id_producto = prompt("Introduce el id del producto: ");
                producto = prompt("Introduce el nombre de producto: ");
                cantidad = parseInt(prompt("Introduce la cantidad: "));
                precio = parseFloat(prompt("Introduce el precio: "));

                productos.push({id: id_producto, prod:producto, cant:cantidad, pr:precio});
            }

            return productos;
        }

function generar_tabla(){
     productos = añadirProducto();

    let myTable= "<table><tr><td style='width: 100px; color: red;'>ID</td>";
    myTable+= "<td style='width: 100px; color: red; text-align: right;'>Nombre</td>";
    myTable+="<td style='width: 100px; color: red; text-align: right;'>Cantidad</td>";
    myTable+="<td style='width: 100px; color: red; text-align: right;'>Precio</td></tr>";
    myTable+="<tr><td style='width: 100px;'>---------------</td>";
    myTable+="<td style='width: 100px; text-align: right;'>---------------</td>";
    myTable+="<td style='width: 100px; text-align: right;'>---------------</td>";
    myTable+="<td style='width: 100px; text-align: right;'>---------------</td></tr>";    

    for (let i = 0; i < productos.length; i++) {
          myTable+="<tr><td style='width: 100px;text-align: right;'>" + productos[i].id + "</td>";        
          myTable+="<td style='width: 100px;text-align: right;'>" + productos[i].prod + "</td>";    
          myTable+="<td style='width: 100px;text-align: right;'>" + productos[i].cant + "</td>";    
          myTable+="<td style='width: 100px;text-align: right;'>" + productos[i].pr + "</td>";    
          myTable+="</tr>";
    }
      
      myTable+="</table>";
      document.getElementById('tablePrint').innerHTML = myTable;
  }
  
  generar_tabla();
<div id="tablePrint"> </div>

Edito: Añado una solución con string templates:

function añadirProducto(){
            productos = new Array();
            elementos = parseInt(prompt("¿ Cuantos productos quieres añadir ?"));
            for (let i = 0; i < elementos; i++) {
                id_producto = prompt("Introduce el id del producto: ");
                producto = prompt("Introduce el nombre de producto: ");
                cantidad = parseInt(prompt("Introduce la cantidad: "));
                precio = parseFloat(prompt("Introduce el precio: "));

                productos.push(new Array(id_producto, producto, cantidad, precio));
            }
            return productos;
        }


function getCells(data, type) {
  return data.map(cell => `<${type}>${cell}</${type}>`).join('');
}

function createBody(data) {
  return data.map(row => `<tr>${getCells(row, 'td')}</tr>`).join('');
}

function createTable(data) {
  let cabeceras = ['ID', 'Nombre', 'Cantidad', 'Precio'];
  return `
    <table>
      <thead>${getCells(cabeceras, 'th')}</thead>
      <tbody>${createBody(data)}</tbody>
    </table>
  `;
}

document.body.insertAdjacentHTML('beforeend', createTable(añadirProducto()));

2
  • 2
    Ya no es necesario concatenar. Usando Template strings es la forma más limpia.
    – gugadev
    el 13 ene. 2019 a las 13:55
  • Cierto, añado ejemplo con string templates.
    – Kiko_L
    el 13 ene. 2019 a las 16:11

Tu Respuesta

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

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