jQuery sum rows adding all cells

Question

I've searched various SO questions about adding table columns but not many on rows. Here's what I have so far:

HTML

<table>
    <thead>
        <tr>
            <th>MAX ATK</th>
            <th>MAX DEF</th>
            <th>MAX HP</th>
            <th>Overall</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="combat">8170</td>
            <td class="combat">6504</td>
            <td class="combat">6050</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">8500</td>
            <td class="combat">10200</td>
            <td class="combat">7650</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">9185</td>
            <td class="combat">7515</td>
            <td class="combat">9185</td>
            <td class="total-combat"></td>
        </tr>
    </tbody>
</table>

jQuery

 $(document).ready(function () {
     var sum = 0;
     $('tr').find('.combat').each(function () {
         var combat = $(this).text();
         if (!isNaN(combat) && combat.length !== 0) {
             sum += parseFloat(combat);
         }
     });

     $('.total-combat').html(sum);
 });

You can see my fiddle here.

Problem: It's finding ALL occurrences of .combat and adding them up instead of only finding occurrences of .combat within the current row. So instead of:

MAX ATK MAX DEF MAX HP  Overall
 8170    6504    6050   20724
 8500    10200   7650   26350
 9185    7515    9185   25885

I'm getting:

MAX ATK MAX DEF MAX HP  Overall
 8170    6504    6050   72959
 8500    10200   7650   72959
 9185    7515    9185   72959

I tried using closest() thinking that would tell it to find the parent tr and only add tds within that tr, like so:

     $('.combat').closest('tr').each(function () {

but that didn't work :(

Any help would be greatly appreciated!

Answer 1

Try

 $('.combat').closest('tr').find('.combat').each(function () {

Answer 2

You need to use a each loop

$(document).ready(function () {
    //iterate through each row in the table
    $('tr').each(function () {
        //the value of sum needs to be reset for each row, so it has to be set inside the row loop
        var sum = 0
        //find the combat elements in the current row and sum it 
        $(this).find('.combat').each(function () {
            var combat = $(this).text();
            if (!isNaN(combat) && combat.length !== 0) {
                sum += parseFloat(combat);
            }
        });
        //set the value of currents rows sum to the total-combat element in the current row
        $('.total-combat', this).html(sum);
    });
});

Demo: Fiddle

A shorter way to sum: Using unary plus - Demo

Answer 3

You can use this;

$(document).ready(function () {

     $('tr').each(function () {
         var sum = 0;
         $(this).find('.combat').each(function () {
             var combat = $(this).text();
             if (!isNaN(combat) && combat.length !== 0) {
                 sum += parseFloat(combat);
             }
         });
         $(this).find('.total-combat').html(sum);
     });
 });

HEre is working demo: http://jsfiddle.net/wq459/