javascript - 如何使用 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>

结果是

类别____金额____类型____描述

我的表是使用 Struts 填充的:我在另一个 JSP 上选择一个部门，然后按“显示”转到生成该表的页面。因此，该表不一定具有固定的行数。我想做的是将每笔交易的金额列相加，以便显示总数。我尝试使用 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);
    }
}

Roman C is right though .您最好使用 JS 框架或使用 JSP 中的计数器来总结这一点。自定义脚本需要一些努力来维护。