添加表值的Javascript

Question

my HTML code looks like this

<TR Row="1" CLASS="ThemeAlignCenter">
                <TD id="wrdActive_Row1" style="width: 50px"
                    CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">6</SPAN></TD>

... more rows

I want to put a javascript at the end of the page to add all of the the values of lblactive_row1 when ever it appears in the page (in this example the number 6)

Edit: more source

    <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 can is add a little script at the end

Answer 1

Depending on whether you're using jQuery or not, you might have to modify your HTML to make it easier to pick out the elements you need.

With jQuery you should be able to do something like this:

var total = 0;
$('table tr.ThemeAlignCenter > td.rdThemeDataTableCell > span').each(function(i) {
    total += parseInt($(this).text());
});

Without jQuery, assuming your <table> has an id of data , something along these lines should help:

var tbl = document.getElementById('data');
var cells = tbl.getElementsByTagName('td');

var total = 0;
for (var i = 0, limit = cells.length; i < limit; i++) {
    var td = cells[i];
    if (td.className === 'rdThemeDataTableCell') {
        var elem = td.getElementsByTagName('span')[0];
        total += parseInt(elem.innerHTML);
    }
}

EDIT : refactored the code so it can be applied to each table (should hopefully work if the table id attributes can't be amended and have to remain identical):

function sumTable(tbl) {
    var cells = tbl.getElementsByTagName('td');

    var total = 0;
    for (var i = 0, limit = cells.length; i < limit; i++) {
        var td = cells[i];
        if (td.className === 'rdThemeDataTableCell') {
            var elem = td.getElementsByTagName('span')[0];
            total += parseInt(elem.innerHTML);
        }
    }

    return total;
}

var tables = document.getElementsByTagName('table');
var results = [];
for (var i = 0, limit = tables.length; i < limit; i++) {
    var total = sumTable(tables[i]);
    results.push(total);
}

Answer 2

Something like this might work:

function totalRows() {
    var total = 0;
    var spans = document.getElementsByTagName('span');

    for(var i=0; i<spans.length; i++) {
        if(spans[i].getAttribute('id') === 'lblactive_Row1') {
            total += parseInt( spans[i].innerHTML, 10);
        }
    }

    return total;
}

attach totalRows() to an eventHandler