Javascript для добавления значений таблицы

Question

моего HTML-код выглядит следующим образом

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

... more rows 

Я хочу поставить JavaScript в конце страницы, чтобы добавить все значения lblactive_row1 когда-либо оказывается в страница (в данном примере номер 6)

Edit: более источник

<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... 

это продолжается так еще на 10 или около того столов, все тот же источник. редактирование html не может быть и речи, потому что оно генерируется сторонним инструментом. все, что я могу добавить небольшой скрипт в конце

Answer 1

В зависимости от того, используете ли вы jQuery или нет, вам, возможно, придется изменить свой HTML, чтобы было легче выбрать нужные элементы.

С JQuery вы должны быть в состоянии сделать что-то вроде этого:

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

Без JQuery, предполагая, что ваш < таблицу > имеет идентификатор данных, то вдоль этих линий должно помочь:

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: отредактирован код, чтобы он мог применяться к каждой таблице (мы надеемся, будем работать, если атрибуты идентификатора таблицы не могут быть изменены и должны оставаться идентичными):

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

Нечто подобное может работать:

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; 
} 

присоединять totalRows() к EventHandler