何时使用$。每个从表的行中获取重复的值

问题描述 投票:0回答:1

[早上好,我想获取表中的所有记录并将它们添加到数组中,然后使用ajax将它们注册到数据库中。我的问题是使用.each我可以正确获取第一行的值,但是当添加另一行时,该数组最终会重复。我分享了一些图片,以便更好地理解我的问题debugging the first row of the table

duplicates

all duplicate table rows

Javascript

function AgregarLista() {
    const TD = $('<td></td>');
    const TR = $('<tr></tr>');
    const TABLE_VENTA = $('#dtVenta');
    const PRODUCT_TOTAL = $('#TotalPagar');
    let item = 0;
    $('#btnAgregarTabla').click(function () {
        item++;
        let id_cliente = $('#id_cliente').val();
        let id_producto = $('#id_producto').select2('val');
        let precio_producto = $('#precio').val();
        let stock_producto = $('#stock').val();
        let cantidad_producto = $('#cantidad').val();
        let subtotal_producto = parseInt(precio_producto) * parseInt(cantidad_producto);

        let nro_venta = TD.clone().html(item).addClass('nro_sale');
        let cliente = TD.clone().html(id_cliente).addClass('td_customer');
        let producto = TD.clone().html(id_producto).addClass('td_product');
        let precio = TD.clone().html(precio_producto).addClass('td_price');
        let stock = TD.clone().html(stock_producto).addClass('td_stock');
        let cantidad = TD.clone().html(cantidad_producto).addClass('td_quantity');
        let preciototal = TD.clone().html(subtotal_producto).addClass('subtotal');

        let newRow = TR.clone().append(nro_venta, cliente, producto, precio, stock, cantidad, preciototal);

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

        TABLE_VENTA.find('tbody').append(newRow);
        PRODUCT_TOTAL.find('#total_pagar').val(total);

//*===========================================================  
//* here I call the method I use to get the array  
//* ==========================================================

        loopDetailTable();
    });
}  

使用此代码,我获得了表行的值

// * ==============================================
//* With this code I get the values ​​of the table rows
// * ==============================================
function loopDetailTable(params) {
    let index = 0;
    var obj = new Object();
    obj.DetailsList = [];
    $('#dtVenta').each(function () {
        let item_detalle = new Object();
        item_detalle.vNumero = $('.nro_sale').text();
        item_detalle.cID = $('.td_customer').text();
        item_detalle.pID = $('.td_product').text();
        item_detalle.pPrice = $('.td_price').text();
        item_detalle.pStock = $('.td_stock').text();
        item_detalle.pQuantity = $('.td_quantity').text();
        item_detalle.pSubtotal = $('.subtotal').text();
        obj.DetailsList[index] = item_detalle;
        index++;
        console.log(obj);
    });
    return obj;
}  

HTML表单

<div class="d-flex">
    <div class="col-md-5">
        <form role="form">
            <div class="card">
                <div class="card-body">
                    <h5>Datos del cliente:</h5>
                    <div class="form-group d-flex">
                        <div class="col-md-6 d-flex">
                            <input type="text" name="dni" id="dni" class="form-control" placeholder="dni cliente">
                            <input type="button" id="btnBuscarCliente" value="Buscar" class="btn btn-outline-danger">
                        </div>
                        <div class="col-md-6">
                            <input type="hidden" name="id_cliente" id="id_cliente" value="">
                            <input type="text" name="nombre_cliente" id="nombre_cliente" value="" class="form-control" placeholder="Cliente" disabled>
                        </div>
                    </div>
                    <h5>Datos del producto:</h5>
                    <div class="form-group d-flex">
                        <div class="col-md-6 d-flex">
                            <!-- <input type="text" name="id_producto" id="id_producto" class="form-control" placeholder="codigo producto"> -->
                            <select name="id_producto" id="id_producto" class="id_producto js-states form-control"></select>
                            <input type="button" id="btnBuscarProducto" value="Buscar" class="btn btn-outline-danger">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="nombre_producto" id="nombre_producto" class="form-control" placeholder="Producto" disabled>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-4">
                            <input type="text" name="precio" id="precio" class="form-control" placeholder="s/.0.00" disabled>
                        </div>
                        <div class="col-md-4">
                            <input type="number" name="stock" id="stock" class="form-control" placeholder="stock" disabled>
                        </div>
                        <div class="col-md-4">
                            <input type="number" name="cantidad" id="cantidad" value="1" class="form-control" placeholder="cantidad">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <input type="button" id="btnAgregarTabla" value="Agregar" class="btn btn-primary float-right">
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-7">
        <div class="card">
            <div class="card-body">
                <div class="d-flex col-md-6 ml-auto">
                    <label class="mx-3 mt-1">Nro.serie:</label>
                    <input type="text" name="nro_serie" id="nro_serie" th:value="${serie}" class="form-control">
                </div>
                <table id="dtVenta" class="table mt-4" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Nro.Venta</th>
                            <th>Cliente</th>
                            <th>Producto</th>
                            <th>Precio</th>
                            <th>Stock</th>
                            <th>Cantidad</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 id="TotalPagar" class="card-footer">
                <div class="row">
                    <input type="button" id="btnCancelarVenta" value="Cancelar" class="btn btn-danger">
                    <input type="button" id="btnGenerarVenta" value="Generar" class="btn btn-success mx-1">
                    <div class="d-flex ml-auto">
                        <label for="" class="mx-2 mt-1">Total:</label>
                        <input type="text" name="total_pagar" id="total_pagar" class="form-control">
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>  

谢谢大家的帮助,问候。

javascript jquery each
1个回答
0
投票

由于选择器,您获得“重复项”。您使用不唯一的类名称进行选择。例如,$('.td_customer').text();选择所有客户单元。你不想要的。您只需要某一行的客户单元。我认为您可以通过遍历表行来解决您的问题(遍历ID为dtVenta的表,那只是一张表)。

所以尝试类似的东西:

$('#dtVenta tr').each(function () {
        // $(this) is the 'current' row of the table
        let item_detalle = new Object();
        item_detalle.vNumero = $(this).find('.nro_sale').text(); // find all child .nro_sale cells and get it's text
        item_detalle.cID = $(this).find('.td_customer').text();
        item_detalle.pID = $(this).find('.td_product').text();
        item_detalle.pPrice = $(this).find('.td_price').text();
        item_detalle.pStock = $(this).find('.td_stock').text();
        item_detalle.pQuantity = $(this).find('.td_quantity').text();
        item_detalle.pSubtotal = $(this).find('.subtotal').text();
        obj.DetailsList[index] = item_detalle;
        index++;
        console.log(obj);
    });
© www.soinside.com 2019 - 2024. All rights reserved.