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>