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上选择一个部门，然后按＆＃34;显示＆＃34;转发到生成表的页面。因此，该表不一定具有一定数量的行。我想要做的是从每个交易中添加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);
    }
}

Roman C is right though。你最好使用JS框架或在JSP中使用计数器来总结这一点。自定义脚本需要一些维护工作。

Answer 2

我不了解JSP，但我认为Roman C是对的。

但如果你不想用javascript来解决这个问题，那么这是一个有效的例子：

var sum = 0;
var table = document.getElementById("res");
var ths = table.getElementsByTagName('th');
var tds = table.getElementsByClassName('countable');
for(var i=0;i<tds.length;i++){
    sum += isNaN(tds[i].innerText) ? 0 : parseInt(tds[i].innerText);
}

var row = table.insertRow(table.rows.length);
var cell = row.insertCell(0);
cell.setAttribute('colspan', ths.length);

var totalBalance  = document.createTextNode('Total Balance ' + sum);
cell.appendChild(totalBalance);

链接到jsfiddle https://jsfiddle.net/4cetuvno/1/

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

2 个答案: