Первое, что вам нужно сделать, это внести небольшое изменение в ваш код HTML. Поскольку вы будете перечислять несколько продуктов, каждый со своей ценой, количеством и промежуточной суммой, вам нужно использовать class или атрибуты данных вместо id, так как id уникален для всего документа, и идентификатор может только использоваться один раз. Соответствующий код (внутри l oop) должен выглядеть примерно так:
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
<div class="col-sm-10">
<h4 class="nomargin">{{crops_ordered_names}}</h4>
<p>Available amount: {{crops_ava}}</p>
</div>
</div>
</td>
<td data-th="Price" data-type="price">{{crops_ordered_cost}}</td>
<td data-th="Quantity">
<input type="number" class="form-control text-center" data-type="quan" min="1" max="{{crops_ava}}">
</td>
<td data-th="Subtotal" class="text-center" data-type="subtotal"></td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
Вам также необходимо обновить нижний колонтитул таблицы, чтобы общая ячейка получила атрибут данных:
<td class="text-center" data-type="total"><strong>Total <span>0</span></strong></td>
(Элемент span необходим, чтобы мы могли обновлять только число.)
Затем приведенный ниже пример кода должен помочь, обновляя промежуточный итог при изменении количества. Код может не работать в Inte rnet Explorer, поэтому дайте мне знать, если это необходимо. Я также добавил комментарии, чтобы уточнить, что и где происходит.
// Find all quantity inputs, and the element where we display the total.
const quantityInputs = document.querySelectorAll('[data-type="quan"]');
const total = document.querySelector('[data-type="total"] span');
// For simplicity, we calculate the total in a separate function.
const calculateTotal = () => {
// Find all the subtotals.
const subtotals = document.querySelectorAll('[data-type="subtotal"]');
let calculatedTotal = 0;
// Loop through all the subtotals, and add them to the final total.
Array.from(subtotals).forEach((subtotal) => {
calculatedTotal += Number(subtotal.textContent);
});
// Then return the total.
return calculatedTotal;
}
// As above, we use a separate function to calculate the subtotal for a product.
const calculateSubtotal = (product) => {
// The input event will fire when the value of the quantity field is changed.
product.addEventListener('input', () => {
/*
* With multiple prices and subtototals, we need to look for them going
* upwards from the quantity field, using the parent elements (first the
* table cell, then the table row).
*/
const parentRow = product.parentNode.parentNode;
// Then find the price and subtotal for this product.
const price = parentRow.querySelector('[data-type="price"]');
const subtotal = parentRow.querySelector('[data-type="subtotal"]');
// And finally, update the subtotal and the total.
subtotal.textContent = price.textContent * product.value;
total.textContent = calculateTotal();
});
}
// Loop through all the quantity inputs and wait for the subtotal to change.
Array.from(quantityInputs).forEach((element) => calculateSubtotal(element));