Как я могу убедиться, что вторая часть функции выполняется, вычисляя столбцы и показывая результат в конце каждой строки?
function sum_row_qty(el, poOrigin) {
let rowTotal = 0
if (el) {
let parent = el.closest("tr")
parent.querySelectorAll('.size_qty').forEach(function(e) {
rowTotal += parseFloat(e.value);
})
if (rowTotal) {
parent.querySelector('.qty').value = rowTotal;
}
} else {
document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
}
}
<table class = "table table-hover table-vcenter" id = "dtable">
<thead>
<tr>
<th style = "width:4%; text-align: left">OS</th>
<th style = "width:4%">XS</th>
<th style = "width:4%">Total</th>
</tr>
</thead>
<tbody id = "tableRows">
<tr>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this)"></td>
<td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
</tr>
<tr>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this);"></td>
<td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
</tr>
</tbody>
</table>
Спасибо за ваш комментарий, @mykaf. Функция вызывается при загрузке таблицы. Консоль регистрирует, что внутри else {}
, и, кажется, запускается один раз, хотя есть 2 строки. Итак, я думаю, что это не дает правильных значений полей для суммирования.
@mykaf Я думаю, идея в том, что функция вызывается с верхнего уровня с пустым el
, который должен перейти в else
. Затем он вызывает себя в цикле, который должен выполнить код if
.
Почему функция не использует аргумент poOrigin
?
Можете ли вы добавить все недостающие функции и переменные? Или избавиться от обращений к таким вещам, как add_to_total()
и getPoOrigin()
, которые не имеют отношения к вопросу? Мы должны иметь возможность запускать код во фрагменте.
Прости за это, @Barmar! Просто удалил их. Спасибо за ваш комментарий!
@Barmar Я удалил ненужные функции. Любая идея о том, почему они не вычисляются, когда параметр не передается? Заранее спасибо за внимание.
Вот ответ, предложенный джентльменом на другой платформе :
function sumInputs(row) {
const inputsArr = [...row.querySelectorAll('.size_qty')];
return inputsArr.reduce((total, {
value
}) => total += parseFloat(value), 0);
}
function sum_row_qty(el) {
if (el) {
const currentRow = el.closest("tr");
currentRow.querySelector('.qty').value = sumInputs(currentRow);
}
}
tableRows.querySelectorAll('tr').forEach(row => {
row.querySelector('.qty').value = sumInputs(row);
});
<table class = "table table-hover table-vcenter" id = "dtable">
<thead>
<tr>
<th style = "width:4%; text-align: left">OS</th>
<th style = "width:4%">XS</th>
<th style = "width:4%">Total</th>
</tr>
</thead>
<tbody id = "tableRows">
<tr>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this)"></td>
<td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
</tr>
<tr>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
<td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this);"></td>
<td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
</tr>
</tbody>
</table>
Когда вы звоните
sum_row_qty()
, что не в себе? Вы понимаете, что вызываете это рекурсивно?