Javascript parse html add values of a table

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 so开发者_高级运维urce. 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)

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