JQuery sum all data in specific table row

Question

I have a table with inputs in each cell, except one (.total) which specifies the total of each table row. When one of the inputs are changed I would like the sum to change for that row. Below is far as I have been able to get. The HTML:

<table>
   <tr>
      <td><input value = "100"/></td>
      <td><input value = "100"/></td>
      <td><input value = "100"/></td>
      <td class="total">300</td>
   </tr>
   <tr>
      <td><input value = "200"/></td>
      <td><input value = "200"/></td>
      <td><input value = "200"/></td>
      <td class="total">600</td>
   </tr>
</table>

Now for the jQuery:

    //add keyup handler
    $(document).ready(function(){
        $("input").each(function() {
            $(this).keyup(function(){
                newSum();
            });
        });
    });

    function newSum() {
        var sum = 0;
        var thisRow = $(this).closest('tr');

        //iterate through each input and add to sum
        $(thisRow).("td:not(.total) input:text").each(function() {
                sum += this.value;            
        });

        //change value of total
        $(thisRow).(".total").html(sum);
    }

Any help in finding out what I've done wrong will be greatly appreciated. Thanks!

Are you getting errors? Is it just not calculating? What is the problem you are having right now? — Corey Sunwold
– Corey Sunwold, Commented Mar 7, 2011 at 2:39
Sorry about not explaining. Right now its just not calculating. It changes nothing. If I remove the $(thisRow) portion of the code in both places it will change every "total" value to the sum of all table data in the table. — groc426
– groc426, Commented Mar 7, 2011 at 2:47

Ken Redler · Accepted Answer · 2011-03-07 03:06:44Z

3

Your main problem is the use of this in your function. If you place the body of that function directly in the keyup handler, it should work. But this in the body of a separately declared function will refer, essentially, to the object of which it is a method. And that object, in the case above, would be window.

Try this:

$(document).ready(function(){
    $("input").each(function() {
        var that = this; // fix a reference to the <input> element selected
        $(this).keyup(function(){
            newSum.call(that); // pass in a context for newsum():
                               // call() redefines what "this" means
                               // so newSum() sees 'this' as the <input> element
        });
    });
});

You also have some more superficial errors in newSum():

function newSum() {
  var sum = 0;
  var thisRow = $(this).closest('tr');

  thisRow.find('td:not(.total) input:text').each( function(){
    sum += parseFloat(this.value); // or parseInt(this.value,10) if appropriate
  });

  thisRow.find('td.total input:text').val(sum); // It is an <input>, right?
}

edited Mar 7, 2011 at 3:06

answered Mar 7, 2011 at 3:00

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Groovetrain Over a year ago

I always forget about using the call method. Thanks for reminding me about it :)

Ben Regenspan · Accepted Answer · 2011-03-07 02:52:38Z

There are a few things wrong that the below should resolve.

newSum is called with the wrong context (the default window context, not the context of the DOM object)
an invalid selector is used to find the input fields
the values you're summing will be treated as text unless you use parseInt

Code:

//add keyup handler
$(document).ready(function(){
    $("input").each(function() {
        $(this).keyup(function(){
            newSum.call(this);
        });
    });
});

function newSum() {
    var sum = 0;
    var thisRow = $(this).closest('tr');
    //iterate through each input and add to sum
    $(thisRow).find("td:not(.total) input").each(function() {
            sum += parseInt(this.value);    
    });

    //change value of total
    $(thisRow).find(".total").html(sum);
}

Aleksi Yrttiaho · Accepted Answer · 2011-03-07 03:01:08Z

I can find a couple of problems and improvements

summing text values will concatenate all the input values, not the numeric values. You have to cast the text value to a number using e.g. parseInt or parseFloat.
$(this).closest('tr') doesn't return a set. You can change this to $(event.target).closest('tr') if you pass the event object from the event handler. The reason for this is that this is evaluated in the default context not in the context of the event.
You should probably use the onchange event instead of onkeyup event: There is no need to update the sum with incomplete information.
You can bind the event using $(selector).keyup(function() {}), you don't need to use the .each function.
JSLint will warn you if you use a function before defining it.
td:not(.total) input:text is a bit specific in the current context - it can be simplified.

Solution with some modifications

function newSum(event) {
    var sum = 0;
    var thisRow = $(event.target).closest('tr');
    thisRow.find("td input").each(function() {
        sum += parseInt(this.value);
    });


    thisRow.find(".total").html(sum);
}

$("input").change(function(event) {
    newSum(event);
});

The composition might be better if the newSum-function didn't have to know about the context as much e.g.

function sumInputsIn(inputs) {
    var sum = 0;
    inputs.each(function() {
        sum += parseInt(this.value, 10);
    });
    return sum;
}

$("input").change(function(event) {
    var row = $(event.target).closest('tr');
    row.find('.total').html(sumInputsIn(row.find('td input')));
});

Joseadrian · Accepted Answer · 2011-03-07 03:00:29Z

1

$(document).ready(function(){  
    $("input").keyup(function(){
        var suma = 0; 
        $(this).parents("tr").children("td").children().each(function(){
            suma+= parseInt($(this).val());
        });
        $(this).parent().parent().children(":last").text(suma);
    });
});

answered Mar 7, 2011 at 3:00

Joseadrian

4,4042 gold badges18 silver badges7 bronze badges

Collectives™ on Stack Overflow

JQuery sum all data in specific table row

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related