Sum total of all text box value in a row using jquery

Question

I want to sum all the text box value in a html table row using jQuery. here is the table:

<table border="1">
  <tr>
      <th>sl</th>
      <th>TA</th>
      <th>DA</th>
      <th>HA</th>
      <th>Total</th>
  </tr>
  <tr>
      <td>1</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
  <tr>
      <td>2</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
  <tr>
      <td>3</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
</table>

Here is the jQuery function to add the value of all text box of class expenses and display the result in a text box of id expenses_sum.

$(document).ready(function() {    
  $(".expenses").each(function() {    
    $(this).keyup(function() {     
      calculateSum();
    });
  });
});    

function calculateSum() {    
  var sum = 0;        
  $(".expenses").each(function() {          
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }    
  });

  $("#expenses_sum").val(sum.toFixed(2));
}

how to use this function for each row.

Answer 1

Firstly you have repeated the same id when they should be unique which means your HTML is invalid. You should use a common class instead.

To make this work you need to restrict the .expenses selector to only find the elements within the same row as the input which was changed. To do that you can use closest() to get the nearest parent tr , then find() to get all the inputs.

Also note there are several logic improvements you can make here:

• remove the each() loop to add the event handler
• providing the reference of calculateSum to the event handler so you can use the this keyword to traverse the DOM
• provide a default value of 0 to the value to simplify the sum logic
• hook to the change event as well as keyup for when users paste data in to the field. Try this:

 $(document).ready(function() { $(".expenses").on('keyup change', calculateSum); }); function calculateSum() { var $input = $(this); var $row = $input.closest('tr'); var sum = 0; $row.find(".expenses").each(function() { sum += parseFloat(this.value) || 0; }); $row.find(".expenses_sum").val(sum.toFixed(2)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th>sl</th> <th>TA</th> <th>DA</th> <th>HA</th> <th>Total</th> </tr> <tr> <td>1</td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses_sum"></td> </tr> <tr> <td>2</td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses_sum"></td> </tr> <tr> <td>3</td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses"></td> <td><input class="expenses_sum"></td> </tr> </table> 

Answer 2

you can use like this

$(document).on('keyup change','input.expenses',function(){

  $expenses = $(this).parents('tr').find('.expenses');
  $expenseTotal = $(this).parents('tr').find('#expenses_sum');
  $expenseTotal.val('0');
  $.each($expenses,function(index,object){      
    if($(object).val()!='')
    {
       $expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
    }
  });
});

see demo at - https://jsfiddle.net/Vesharj/zLg3pyq4/

Answer 3

Here is the right way to do this.

    <table border="1">
  <tr>
      <th>sl</th>
      <th>TA</th>
      <th>DA</th>
      <th>HA</th>
      <th>Total</th>
  </tr>
  <tr>
      <td>1</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>
  <tr>
      <td>2</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>
  <tr>
      <td>3</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input class="expenses_sum"></td>
  </tr>

</table>

And js :

$(document).ready(function(){
    $(".expenses").each(function() {

      $(this).keyup(function(){
            sum($(this).parents("tr"));
      });
    });
});
function sum(parent){
    var sum = 0;
    $(parent).find(".expenses").each(function(){
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $(parent).find(".expenses_sum").val(sum.toFixed(2));
}

Hope, it helps