Использование $ .each в таблице создает пустые значения

Я добавляю данные формы в таблицу с помощью кнопки и правильно регистрируюсь, кроме того, мне нужно просмотреть таблицу и сохранить данные каждой строки в массиве, и у меня возникает проблема при добавлении в массив Ряд хранит несколько строк, которые не существуют, с пустыми значениями. Я приложил изображение, чтобы вы могли видеть
Array vacio y duplicado

JAVASCRIPT
В этой части я добавляю данные формы в таблицу

const TD = $('');
const 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
HTML-код формы и таблицы

Customer information:

Products:
Code Customer Product Price Stock Quantity Subtotal

Я заранее благодарен за вашу помощь , приветствие.

1
задан 23.11.2019, 22:08
1 ответ

Первое, чем говорить состоит в том, что в тебе cГіdigo HTML sГ - появляется tr vacГ - или сначала. Если ты будешь хранить только объект, лучшее состоит в том, чтобы ты использовал array и хранил объект в этом array и каждый раз, когда работала эта funciГіn, vacГ-схвати этот array и ты вновь наполняешь это функцией push () 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>
0
ответ дан 01.12.2019, 10:55