jQuery loop through table cells

Question

I have a table with id=main... looking to add two cells from each row together, then do the same for another row etc etc. however, while I've managed to do so for the first row, all the result cells are the same in the following rows. e.g., 'test' = 102.9 for all cells int he table... btw, been looking into .each() but am unsure how to implement..

<tr id='main'>
<td class='rtng'>100</td>
<td class='win'>2.90</td>
<td class='test'></td></tr>

<tr id='main'>
<td class='rtng'>95</td>
<td class='win'>4.25</td>
<td class='test'></td></tr>

here's my jQuery

$(document).ready(function() {
    var num1 = $(".rtng").html();
    var num2 = $(".win").html();
    var result = parseFloat(num1) + parseFloat(num2);
    $(".test").html(result);
});

another attempt

$(document).ready(function() {
    $('tr.rtng').each(function() {
        var num1 = $(".rtng").html();
        var num2 = $(".win").html();
        var result = parseFloat(num1) + parseFloat(num2);
        $(".test").html(result);
    });
});

any help would be lovely :)

Miha Rekar · Accepted Answer · 2012-09-25 11:14:01Z

3

For starters your HTML is not valid. There is no <table> element and you have the same id used twice - ids are unique. Make your HTML like that:

<table id="tableMain">
    <tr>
        <td class='rtng'>100</td>
        <td class='win'>2.90</td>
        <td class='test'></td>
    </tr>
    <tr>
        <td class='rtng'>95</td>
        <td class='win'>4.25</td>
        <td class='test'></td>
    </tr>
</table>

and then in jQuery:

$(document).ready(function() {         
    $('#tableMain tr').each(function() {
        var $this = $(this);
        $this.find('.test').text(parseFloat($this.find('.rtng').text()) + parseFloat($this.find('.win').text()));
    });
});

answered Sep 25, 2012 at 11:14

Miha Rekar

1,54614 silver badges19 bronze badges

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

Comments

James Allardice · Accepted Answer · 2012-09-25 11:08:30Z

0

You can select all the .test elements and set their contents by calling .html() and passing in a function that calculates the correct value:

$(".test").html(function () {
    // `this` refers to the current `.test` element...
    var num1 = parseFloat($(this).siblings(".rtng").html()),
        num2 = parseFloat($(this).siblings(".win").html());
    return num1 + num2;
});

Here's a working example.

Side note: as mentioned by others, the values of id attributes must be unique in a document.

answered Sep 25, 2012 at 11:08

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Comments

scottlimmer · Accepted Answer · 2012-09-25 11:14:36Z

0

Firstly you have used the same id twice, which will create problems. Either give the rows unique ids or change them to classes. Assuming you go to classes I'd do something like:

$('tr.main').each(function() {
    var num1 = $(this).children('.rtng').text();
    var num2 = $(this).children('.win').text();
    var result = parseFloat(num1) + parseFloat(num2);
    $(this).children('.test').text(result);
});

You need to select each of the tds in the context of the row, hence the children function.

answered Sep 25, 2012 at 11:14

scottlimmer

2,2881 gold badge23 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery loop through table cells

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related