jQuery：汇总表行中的多个输入

Question

我有一个产品订购单，有各种尺寸可供选择。 因此，对于每种产品，每种尺寸都有一个输入，且总和在行末。 我实际上有大约500行。

 <table> <tr> <th>Product</th> <th>Size 1</th> <th>Size 2</th> <th>Size 3</th> <th>TOTAL</th> </tr> <tr> <td>A</td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td></td> </tr> <tr> <td>B</td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td></td> </tr> <tr> <td>C</td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td></td> </tr> </table> 

我尝试了几种方法，但是它从来都不想工作。 我仅一次成功地计算了所有输入，而不仅是单独计算了一行。

每当输入更改时，我想计算最后一个td中每一行的总和。

有谁知道我该如何解决这个问题？

Answer 1

将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 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <th>Product</th> <th>Size 1</th> <th>Size 2</th> <th>Size 3</th> <th>TOTAL</th> </tr> <tr> <td>A</td> <td> <input type="text" class="productA"> </td> <td> <input type="text" class="productA"> </td> <td> <input type="text" class="productA"> </td> <td></td> </tr> <tr> <td>B</td> <td> <input type="text" class="productB"> </td> <td> <input type="text" class="productB"> </td> <td> <input type="text" class="productB"> </td> <td></td> </tr> <tr> <td>C</td> <td> <input type="text" class="productC"> </td> <td> <input type="text" class="productC"> </td> <td> <input type="text" class="productC"> </td> <td></td> </tr> </table> 

---

如果您想将值放在只读文本框中。

 $('table input').on('input', function() { var $tr = $(this).closest('tr'); // get tr which contains the input var tot = 0; // variable to sore sum $('input:not(:last)', $tr).each(function() { // iterate over inputs except last tot += Number($(this).val()) || 0; // parse and add value, if NaN then add 0 }); $('td:last input', $tr).val(tot); // update input in last column }).trigger('input'); // trigger input to set initial value in column 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <th>Product</th> <th>Size 1</th> <th>Size 2</th> <th>Size 3</th> <th>TOTAL</th> </tr> <tr> <td>A</td> <td> <input type="text" class="productA"> </td> <td> <input type="text" class="productA"> </td> <td> <input type="text" class="productA"> </td> <td> <input type="text" readonly> </td> </tr> <tr> <td>B</td> <td> <input type="text" class="productB"> </td> <td> <input type="text" class="productB"> </td> <td> <input type="text" class="productB"> </td> <td> <input type="text" readonly> </td> </tr> <tr> <td>C</td> <td> <input type="text" class="productC"> </td> <td> <input type="text" class="productC"> </td> <td> <input type="text" class="productC"> </td> <td> <input type="text" readonly> </td> </tr> </table> 

Answer 2

您可以使用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); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Product</th> <th>Size 1</th> <th>Size 2</th> <th>Size 3</th> <th>TOTAL</th> </tr> <tr> <td>A</td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td class="result"></td> </tr> <tr> <td>B</td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td class="result"></td> </tr> <tr> <td>C</td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td class="result"></td> </tr> </table> 

Answer 3

 $(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); }); 

 <table> <tr> <th>Product</th> <th>Size 1</th> <th>Size 2</th> <th>Size 3</th> <th>TOTAL</th> </tr> <tr> <td>A</td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td><input type="text" class="productA"></td> <td></td> </tr> <tr> <td>B</td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td><input type="text" class="productB"></td> <td></td> </tr> <tr> <td>C</td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td><input type="text" class="productC"></td> <td></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>