jQuery: sum up multiple inputs in table rows

Question

I have an order form for products, that are available in different sizes. So for every product there is one input for each size with the sum at the end of the row. I reality I have about 500 rows.

 <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> 

I tried several ways but it never wanted to work. I only succeeded in calculating ALL inputs at once but not only for one single row separately.

I want to calculate the sum of each row in the last td everytime the input changes.

Has anyone an idea how I could solve this?

Answer 1

Bind input event handler to input and update column based on values.

 $('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> 

---

In case if you want to put value in a readonly textbox.

 $('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

You do this with map and 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>