1

Estoy haciendo un carrito de ventas, entonces tengo lo siguiente:

Un array multidimensional que lo creo de esta manera: var render = []; y se llena de la siguiente manera: {nombre:nombre_producto, precio:precio_producto, cantidad: cantidad}

Una vez que tengo este array, quiero mostrar el carrito y para ello, construí la siguiente function en javascript:

var $carrito = document.querySelector('#carrito');
var $tableCart = document.querySelector('#tabla');

function renderizarCarrito() {
  // Vaciamos todo el html
  $carrito.textContent = '';
  // Generamos los Nodos a partir de carrito
  render.forEach(function (item, indice) {
    // Obtenemos el item que necesitamos de la variable base de datos
    // Creamos el nodo del item del carrito
    var miNodo = document.createElement('li');
    var inputCantidad = document.createElement('input');
    inputCantidad.setAttribute('type', 'number');
    inputCantidad.setAttribute('min', '0');
    inputCantidad.setAttribute('max', '10');
    inputCantidad.setAttribute('value', render[indice]['cantidad']);
    inputCantidad.classList.add('input-list');
    miNodo.classList.add('list-group-item', 'text-left');
    miNodo.textContent = `${render[indice]['nombre']} - $${render[indice]['precio']} - `;
    // Boton de borrar
    var miBoton = document.createElement('button');
    miBoton.classList.add('btn', 'btn-danger', 'space-btn');
    miBoton.textContent = 'X';
    miBoton.setAttribute('posicion', indice);
    miBoton.addEventListener('click', borrarItemCarrito);
    //

    var tabla = document.createElement('table');
    
    var row = document.createElement('tr');
    for (var i = 0; i < render.length; i++) {
      var cell = document.createElement('td');
      //console.log(render[i]['nombre'] + "" + render[i]['precio']);
      cell.textContent = `${render[i]['nombre']} - $${render[i]['precio']} - `;
      row.appendChild(cell);
    }
        //agregue
    tabla.appendChild(inputCantidad);
    tabla.appendChild(row);

    // Mezclamos nodos
    miNodo.appendChild(inputCantidad);
    miNodo.appendChild(miBoton);
    //console.log(tabla);
    $carrito.appendChild(miNodo);
    $tableCart.appendChild(tabla);

  })
}

Y en el HMTL5 tengo:

<ul id="carrito" class="list-group"></ul>
<div id="tabla"></div>

Cuando activo la function renderizarCarrito() me muestra en pantalla lo siguiente, por ahora tengo mi idea principal de la lista (CREO UNA LISTA, AGREGO SUS DATOS, su input de cantidad y su botón) y quiero replicarlo en una tabla, ya tengo avances, solo que no me gusta tanto porque no tiene el formato correcto la tabla:

introducir la descripción de la imagen aquí

Basados en su experiencia podrían recomendarme algo mejor, alguna alterativa para crear la tabla o quiza hacer observación acerca del código que ya tengo y como mejorarlo.

6
  • Tienes dos ciclos para recorrer el contenido de render, primero .forEach() y dentro for( ... ). Primero creas un elemento de lista (li) que no usas, aunque creo que esa parte es la que va por buen camino; después creas una tabla con una sola columna donde colocas todos los resultados. ¿De dónde tomaste la imagen donde aparece el botón de borrar?
    – Triby
    el 27 ago. 2020 a las 14:47
  • @Triby ese botón lo creo en la function renderizarCarrito(), ahi creo la lista, asigno el texto, creo el botón, el input de cantidad y después agrego el botón a todo el nodo. el 27 ago. 2020 a las 15:16
  • Entonces elimina todo lo que corresponde a la tabla y debería verse como quieres.
    – Triby
    el 27 ago. 2020 a las 15:47
  • Voto por cerrar esta pregunta porque es un duplicado de esta otra. Por favor no dupliques preguntas, edita la primera para mejorarla.
    – Triby
    el 27 ago. 2020 a las 16:22
  • @Triby primero que nada no lees las preguntas, porque pedi alternativas para crear una tabla y adicional a ello tengo un error que estoy solucionando, de hecho ya me quedo, pero sino ayudas tampoco perjudiques, no tengo ninguna pregunta replicada. el 27 ago. 2020 a las 16:28

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.