Javascript parse html add values of a table

Question

my HTML code looks like this

    <TABLE style="" border="0" CLASS="rdThemeDataTable" id="dtWardData"
                cellspacing="0">
                <COL id="wrdActive"></COL>
                <COL id="wrdOccupied"></COL>
                <TR Row="1" CLASS="ThemeAlignCenter">
                    <TD id="wrdActive_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">4</SPAN></TD>
                    <TD id="wrdOccupied_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblOccupied_Row1">4</SPAN></TD>
                </TR>
            </TABLE>

   <TABLE style="" border="0" CLASS="rdThemeDataTable" id="dtWardData"
                cellspacing="0">
                <COL id="wrdActive"></COL>
                <COL id="wrdOccupied"></COL>

                    <TD id="wrdActive_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">6</SPAN></TD>
                    <TD id="wrdOccupied_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblOccupied_Row1">2</SPAN></TD>

                </TR>
            </TABLE>

    Repeat...

it goes on like that for another 10 or so tables, all in the same source. editting the html is out of the question because its generated by a third party tool. all i need is add a little script at the end to add all the values of lblactive_Row1 (4 and 6 in this example)

edited original post - all i need is add a little script at the end to add all the values of lblactive_Row1 (4 and 6 in this example) — 124697
– 124697, Commented Feb 3, 2011 at 14:49

KJYe.Name · Accepted Answer · 2011-02-03 16:10:08Z

1

It is not recommanded to use duplicate ID use class instead

window.onload = function() {
    var data = document.getElementsByTagName('span');
    var result = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == 'lblactive_Row1') {
            result += parseInt(data[i].innerHTML, 10);
        }
    }

    console.log(result);
};

Here is the jsfiddle

edited Feb 3, 2011 at 16:10

answered Feb 3, 2011 at 14:49

KJYe.Name

17.2k5 gold badges51 silver badges63 bronze badges

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

12 Comments

124697 Over a year ago

getting an error: data[i].getElementsByTagName("span")[0] is undefined

124697 Over a year ago

never mind its working now thanks. its working but the result is not a sum of those numbers it should resturn 4+6 =10

KJYe.Name Over a year ago

what is it printing out? its printing out 10 on my side. use window.onload i forget to add it earlier. check the revision

KJYe.Name Over a year ago

i modified it so it grabs all the span and then check the id. which would be the ideal way. i didn't know there are other tags within the td. let me know if this works

Jonny Buchanan Over a year ago

Don't forget to specify a radix of 10 for parseInt, otherwise any values beginning with 0 will be treated as octal :)

|

Collectives™ on Stack Overflow

Javascript parse html add values of a table

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related