CODEWITHSUNDEEP
javascriptjquery
Joe_Pow
Joe_Pow

Reputation: 23

jQuery: sum up multiple inputs in table rows

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?

Upvotes: 1

Views: 9311

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115282

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>

Upvotes: 7

Nenad Vracar
Nenad Vracar

Reputation: 122155

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>

Upvotes: 5

AsgarAli
AsgarAli

Reputation: 2211

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

Upvotes: 0

Related Questions