Question

I have a dynamically generated table which looks something like this:

<table id="mytable">
    <thead>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td>col3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>col1</td>
            <td class="col2">1</td>
            <td class="col3">2</td>
        </tr>
        <tr>
            <td>col1</td>
            <td class="col2">7</td>
            <td class="col3">4</td>
        </tr>
        <tr>
            <td>col1</td>
            <td class="col2">col2</td>
            <td class="col3">col3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Totals</td>
            <td id="col2total"></td>
            <td id="col3total"></td>
        </tr>
    </tfoot>
</table>

How do I get the total of the values in the tds which have the class col2 and add the total to the td with the id col2total? As this table is dynamically generated, I will not know how many tr‘s are generated in the tbody.

Answer 1

Try this:

var total = 0;
$(".col2").each(function() {
    total += parseFloat('0' + $(this).text(), 10);
})
$("#col2total").text(total);