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）

修改：更多来源

    <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，假设你的＆lt; table＆gt;有一个数据的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);
}

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

Javascript添加表的值

2 个答案: