jQuery：总结表行中的多个输入
我有一个产品订单，有不同尺寸可供选择。 因此，对于每个产品，每个尺寸都有一个输入，行的末尾有总和。 我现实我有大约500行。
Product Size 1 Size 2 Size 3 TOTAL A B C
我尝试了几种方法，但它从未想过工作。 我只是一次成功计算所有输入，但不仅仅是单独计算一行。
我想在每次输入改变时计算最后一个td中每一行的总和。
有谁知道如何解决这个问题？
将input事件处理程序绑定到基于值的输入和更新列。
$('table input').on('input', function() { var $tr = $(this).closest('tr'); // get tr which contains the input var tot = 0; // variable to sore sum $('input', $tr).each(function() { // iterate over inputs tot += Number($(this).val()) || 0; // parse and add value, if NaN then add 0 }); $('td:last', $tr).text(tot); // update last column value }).trigger('input'); // trigger input to set initial value in column
Product Size 1 Size 2 Size 3 TOTAL A B C
你用map和reduce做到这一点
$('tr input').on('input', function() { //Select all inputs in row of input that is changed and self (this or changed input) var inputs = $(this).parent('td').siblings('td').andSelf().find('input'); //Use map to return array of only values on inputs in row that is changed var values = inputs.map(function() { return Number($(this).val())}).get(); //Use reduce to sum array of values var sum = values.reduce((a, b) => { return a + b}); //Find .result() cell in row that is changed var result = $(this).parent().siblings('.result'); //Check if sum is number or not and append sum or text msg (isNaN(sum)) ? result.text('Numbers only') : result.text(sum); })
Product Size 1 Size 2 Size 3 TOTAL A B C
$(document).on("input", "input:text", function () { var strClass = $(this).prop("class"); var intTotal = 0; $.each($("input:text." + strClass), function () { var intInputValue = parseInt($(this).val()); if (!isNaN(intInputValue)) { intTotal = intTotal + intInputValue; } }); $(this).parent("td").siblings("td:last").text(intTotal); });
Product Size 1 Size 2 Size 3 TOTAL A B C