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
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.
$('#dtProduct tr')
estás cogiendo los elementos dethead
y te interesa los detbody
y el otro vacio es porque ya dejas 1td
dentro. Realmente no hace falta clonar de un elemento. JQuery te permite hacer un elemento desde un string y luego hacer append Ejemplo w3Schoolconsole.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