1

estoy agregando los datos de un formulario a una tabla por medio de un botón y registra correctamente, adicionalmente necesito recorrer la tabla y almacenar los datos de cada fila en un array, y el problema que tengo es, al agregarse al array la fila se almacenan varias filas que no existen con valores vacios. os adjunto una imagen para que os veáis
Array vacio y duplicado

JAVASCRIPT
En esta parte agrego los datos del formulario a la tabla

const TD = $('<td></td>');
const TR = $('<tr></tr>');
const PRODUCT_TABLE = $('#dtProduct');
const PRODUCTTOTAL = $("#AllPrice");

function Add() {
    var item = 0;
    $('#btnAddToList').click(function () {
        item++;
        var customer_name = $('#customer_name').val();
        var producto_name = $('#producto_name').val();
        var product_price = $('#product_price').val();
        var product_stock = $('#product_stock').val();
        var product_quantity = $('#product_quantity').val();
        var Subtotal = parseInt(product_price) * parseInt(product_quantity);

        let customerCode = TD.clone().html(item).addClass('td_customerCode');
        let customerName = TD.clone().html(customer_name).addClass('td_customerName');
        let productName = TD.clone().html(producto_name).addClass('td_productName');
        let productPrice = TD.clone().html(product_price).addClass('td_productPrice');
        let productStock = TD.clone().html(product_stock).addClass('td_productStock');
        let productQuantity = TD.clone().html(product_quantity).addClass('td_productQuantity');
        let productTotalPrice = TD.clone().html(Subtotal).addClass('subtotal');

        let newRow = TR.clone().append(
            customerCode,
            customerName,
            productName,
            productPrice,
            productStock,
            productQuantity,
            productTotalPrice,
        );

        let total_pagar = Subtotal;
        $('.subtotal').each(function (index, tr) {
            total_pagar = total_pagar + parseInt($(this).text());
        });

        PRODUCT_TABLE.find('tbody').append(newRow);
        PRODUCTTOTAL.find("#total_pay").val(total_pagar);
        // =======================================================================================
        //* AQUI LLAMO A LA FUNCION
        Iterate();
    });
}


//* ESTA FUNCION AGREGA LAS FILAS AL ARRAY
function Iterate() {
    let index = 0;

    var obj = new Object();
    obj.listaDetalle = [];

    $('#dtProduct tr').each(function () {
        let item_detalle = new Object();
        item_detalle.cCode = $(this).find('.td_customerCode').text();
        item_detalle.cName = $(this).find('.td_customerName').text();
        item_detalle.pPrice = $(this).find('.td_productPrice').text();
        item_detalle.pSotck = $(this).find('.td_productStock').text();
        item_detalle.pQuantity = $(this).find('.td_productQuantity').text();
        item_detalle.pSubtotal = $(this).find('.subtotal').text();

        obj.listaDetalle[index] = item_detalle;
        index++;
        console.log(obj);
    });
    return obj;
}  

HTML
El codigo html del formulario y la tabla

<div class="row mt-5">
        <div class="col-md-4">
            <form role="form">
                <div class="card">
                    <div class="card-header">
                        <h4>Customer information:</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="customer_name">Customer:</label>
                                <input type="text" name="customer_name" id="customer_name" class="form-control">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="producto_name">Producto:</label>
                                <input type="text" name="producto_name" id="producto_name" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="product_price">Price</label>
                                <input type="text" name="product_price" id="product_price" class="form-control">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="product_stock">Stock</label>
                                <input type="text" name="product_stock" id="product_stock" class="form-control">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="product_quantity">quantity</label>
                                <input type="number" name="product_quantity" id="product_quantity" value="1" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <input type="button" id="btnAddToList" value="Add to List" class="btn btn-primary">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-8">
            <form role="form">
                <div class="card">
                    <div class="card-header">
                        <h5>Products:</h5>
                    </div>
                    <div class="card-body">
                        <table id="dtProduct" class="table display border border-1" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Code</th>
                                    <th>Customer</th>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Stock</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer" id="AllPrice">
                        <div class="row">
                            <input type="button" id="btnAddToList" value="Generate sale" class="btn btn-success">
                            <label for="" class="ml-auto mx-2 mt-1">Total:</label>
                            <input type="text" name="total_pay" id="total_pay" class="col-md-1 form-control" disabled>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>  

Agradezco su ayuda de antemano, un saludo.

3
  • en $('#dtProduct tr') estás cogiendo los elementos de thead y te interesa los de tbody y el otro vacio es porque ya dejas 1 td dentro. Realmente no hace falta clonar de un elemento. JQuery te permite hacer un elemento desde un string y luego hacer append Ejemplo w3School
    – Jose
    el 23 nov. 2019 a las 20:39
  • En cuanto a lo de duplicar los arrays podrías explicarlo un poco mejor? Me refiero, en la captura solo aparece que se llama varias veces al console.log, ya que lo has puesto dentro del .each(). También decirte que si solo va tener un array en todo el objeto es mejor solo hacer un array
    – Jose
    el 23 nov. 2019 a las 20:41
  • Hola @Jose cuando agrego los datos del formulario a la tabla, por consola me muestra el array de la tabla que contiene una linea vacia y la otra con los valores correctos de la tabla, al agregar nuevamente a la tabla, en la consola aparece el segundo array con la linea vacia, y los siguientes con los valores de las 2 filas agregadas en la tabla, lo que quiero es que al registrar se agreguen las filas de la tabla al array, se las veces que agregue solo debe almacenarse en un solo array el 23 nov. 2019 a las 21:07

1 respuesta 1

0

Lo primero que decir es que en tu código HTML sí aparece un tr vacío al principio. Si vas a almacenar solo un objeto, lo mejor es que uses un array y vayas almacenando el objeto en ese array y cada vez que se ejecute esa función, vacías ese array y lo vuelves a rellenar con la funcion push() de jquery.

"use strict"

$(document).ready(function(){
    const PRODUCT_TABLE = $('#dtProduct');
    const PRODUCTTOTAL = $("#AllPrice");
    
        var item = 0;
        $('#btnAddToList').click(function () {
            item++;
            var TD = $('<td></td>');
            var TR = $('<tr></tr>');

            var customer_name = $('#customer_name').val();
            var producto_name = $('#producto_name').val();
            var product_price = $('#product_price').val();
            var product_stock = $('#product_stock').val();
            var product_quantity = $('#product_quantity').val();
            var Subtotal = parseInt(product_price) * parseInt(product_quantity);
    
            let customerCode = TD.clone().html(item).addClass('td_customerCode');
            let customerName = TD.clone().html(customer_name).addClass('td_customerName');
            let productName = TD.clone().html(producto_name).addClass('td_productName');
            let productPrice = TD.clone().html(product_price).addClass('td_productPrice');
            let productStock = TD.clone().html(product_stock).addClass('td_productStock');
            let productQuantity = TD.clone().html(product_quantity).addClass('td_productQuantity');
            let productTotalPrice = TD.clone().html(Subtotal).addClass('subtotal');
    
            let newRow = TR.append(
                customerCode,
                customerName,
                productName,
                productPrice,
                productStock,
                productQuantity,
                productTotalPrice,
            );
    
            let total_pagar = Subtotal;
            $('.subtotal').each(function (index, tr) {
                total_pagar = total_pagar + parseInt($(this).text());
            });
    
            PRODUCT_TABLE.find('tbody').append(newRow);
            PRODUCTTOTAL.find("#total_pay").val(total_pagar);
            // =======================================================================================
            //* AQUI LLAMO A LA FUNCION
            var lista = Iterate();
        });
    
    //* ESTA FUNCION AGREGA LAS FILAS AL ARRAY
    function Iterate() {
        var listaDetalle = [];
        $('#dtProduct tbody tr').each(function () {
            var item_detalle = new Object();
            item_detalle.cCode = $(this).find('.td_customerCode').text();
            item_detalle.cName = $(this).find('.td_customerName').text();
            item_detalle.pPrice = $(this).find('.td_productPrice').text();
            item_detalle.pSotck = $(this).find('.td_productStock').text();
            item_detalle.pQuantity = $(this).find('.td_productQuantity').text();
            item_detalle.pSubtotal = $(this).find('.subtotal').text();
    
            listaDetalle.push(item_detalle);
        });
        return listaDetalle;   
    }  

});
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="./index.js"></script>
    </head>
    <body>
        <div class="row mt-5">
            <div class="col-md-4">
                <form role="form">
                    <div class="card">
                        <div class="card-header">
                            <h4>Customer information:</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="customer_name">Customer:</label>
                                    <input type="text" name="customer_name" id="customer_name" class="form-control">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="producto_name">Producto:</label>
                                    <input type="text" name="producto_name" id="producto_name" class="form-control">
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label for="product_price">Price</label>
                                    <input type="text" name="product_price" id="product_price" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="product_stock">Stock</label>
                                    <input type="text" name="product_stock" id="product_stock" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="product_quantity">quantity</label>
                                    <input type="number" name="product_quantity" id="product_quantity" value="1" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input type="button" id="btnAddToList" value="Add to List" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-8">
                <form role="form">
                    <div class="card">
                        <div class="card-header">
                            <h5>Products:</h5>
                        </div>
                        <div class="card-body">
                            <table id="dtProduct" class="table display border border-1" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Customer</th>
                                        <th>Product</th>
                                        <th>Price</th>
                                        <th>Stock</th>
                                        <th>Quantity</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>  
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer" id="AllPrice">
                            <div class="row">
                                <input type="button" id="btnAddToList" value="Generate sale" class="btn btn-success">
                                <label for="" class="ml-auto mx-2 mt-1">Total:</label>
                                <input type="text" name="total_pay" id="total_pay" class="col-md-1 form-control" disabled>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>  
    </body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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