2011-02-03 65 views
1

我的HTML代碼如下所示Javascript來添加一個表的值

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

編輯:多個源

<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是不可能的,因爲它是由第三方工具生成的。我只能在最後添加一個小腳本

+0

在哪裏添加值? – 2011-02-03 12:06:16

+0

其他SPAN是否有像'lblactive_Row2','lblactive_Row3'這樣的ID? – Martijn 2011-02-03 12:09:44

+0

@martjin。沒有全部被稱爲lblactive_row1 – code511788465541441 2011-02-03 13:13:47

回答

3

根據您是否使用jQuery,您可能必須修改您的HTML以便更容易地挑選出您需要的元素。

使用jQuery,你應該能夠做這樣的事情:

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

沒有jQuery的,假設你的<表>有數據,一個ID這些方針的東西應該有所幫助:

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

編輯:重構代碼,以便它可以應用於每個表(應該希望工作,如果表id的屬性不能被修改,並必須保持相同):

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

像這樣的東西可能會奏效:

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()到事件處理程序

相關問題