如何使用Javascript汇总单个表列？

Question

我的JSP上有一个生成的表,其中包含事务数据:每个单独的事务都是一行,并且有一个类,数量,类型和描述的列.

<table class="table table-striped" id="res">
        <tr>
            <th>Category</th>
            <th>Amount</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
        <c:forEach var="element" items="${sessionScope.pick}">
            <tr>
                <td><c:out value="${element.category}" /></td>
                <td class="countable">
                    <fmt:formatNumber type="currency" currencyCode="USD" 
                    value="${element.amount}"></fmt:formatNumber>
                </td>
                <td><c:out value="${element.entry_Type}" /></td>
                <td><c:out value="${element.description}" /></td>
            </tr>
        </c:forEach>
    </table>

所以它出来了

Category____Amount____Type____Description

我的表使用Struts填充:我在另一个JSP上选择一个部门,然后按"显示"转发到生成表的页面.因此,该表不一定具有设定的行数.我要做的是从每个事务中添加Amount列,这样我就可以显示总数.我尝试使用Javascript做到这一点,但它不适合我:

<script src="http://code.jquery.com/jquery-2.1.4.min.js">

    var cls = document.getElementById("res").getElementsByTagName("td");
    var sum = 0;
    for (var i = 0; i < cls.length; i++){
        if(tds[i].className == "countable"){
            sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
        }
    }
    document.getElementById("res").innerHTML.append("<tr><td> Total Balance </td><td>" + sum + "</td><td></td><td></td></tr>");
</script>

任何人都可以看到我搞砸了哪里,或者更好的选择是什么？另外,有没有办法对列进行求和并显示总数而不向表中添加另一行？如果可能的话,这将是理想的.

Answer 1

您的变量tds应该命名为cls. 这是一个工作示例。

https://jsfiddle.net/34wf5gzs/

for (var i = 0; i < cls.length; i++){
    if(cls[i].className == "countable"){
        sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
    }
}

不过，罗曼·C 是对的。您最好使用 JS 框架或在 JSP 中使用计数器来总结这一点。自定义脚本需要付出一些努力来维护。