Использование $ .each в таблице создает пустые значения
Я добавляю данные формы в таблицу с помощью кнопки и правильно регистрируюсь, кроме того, мне нужно просмотреть таблицу и сохранить данные каждой строки в массиве, и у меня возникает проблема при добавлении в массив Ряд хранит несколько строк, которые не существуют, с пустыми значениями. Я приложил изображение, чтобы вы могли видеть
JAVASCRIPT
В этой части я добавляю данные формы в таблицу
const TD = $(' HTML
HTML-код формы и таблицы
Я заранее благодарен за вашу помощь , приветствие.
1
задан In Other Moment
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
ответ дан rubenchus
01.12.2019, 10:55
Ссылка