如何使用JavaScript对单个表列求和? [英] How to sum a single table column using Javascript?

问题描述

我在JSP上有一个生成的表，其中包含交易数据:每个单独的交易都是一行，并且有一列用于类别，金额，类型和描述.

I have a generated table on my JSP that contains data for transactions: each individual transaction is a row, and there's a column for category, amount, type, and description.

<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上选择了一个部门，然后按显示"以转到生成该表的页面.因此，该表不必具有固定的行数.我想做的是将每笔交易的金额"列加起来，以便显示总计.我尝试使用Javascript来执行此操作，但对我而言无效:

My table is populated using Struts: I select a department on another JSP, then press "display" to forward to the page that generates the table. Because of this, the table won't necessarily have a set number of rows. What I'm trying to do is add up the Amount column from each transaction so I can display the total. I tried to do this using Javascript but it hasn't worked for me:

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

谁能看到我搞砸的地方，或者有什么更好的选择?另外，有没有一种方法可以对列进行求和并显示总计，而无需在表中添加另一行?如果可能的话，那将是理想的.

Can anyone see where I've messed up, or what a better option might be? Also, is there a way to sum the columns and display the total without adding another row to the table? That would be ideal if possible.

推荐答案

您的变量tds应该命名为cls.这是一个有效的示例.

Your variable tds should be named cls. Here is a working example.

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中使用计数器对此进行总结.自定义脚本需要进行一些维护.

Roman C is right though. You're better off summing this up using a JS framework or using a counter in JSP. Custom scripts require some effort to maintain.

这篇关于如何使用JavaScript对单个表列求和?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！