JSP 如何使用Javascript对单个表列求和？

izkcnapc 于 2022-12-07 发布在 Java

关注(0)|答案(3)|浏览(181)

我在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上选择了一个部门，然后按“display”转到生成表的页面。因此，表不一定有固定的行数。我尝试做的是将每个事务的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>

有没有人知道我在哪里搞砸了，或者有什么更好的选择？还有，有没有方法可以对列求和并显示总计，而不向表中添加另一行？如果可能的话，这是最理想的。

jsp

来源：https://stackoverflow.com/questions/35232127/how-to-sum-a-single-table-column-using-javascript

3条答案

按热度按时间

yr9zkbsy1#

变量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是对的。最好使用JS框架或JSP中的计数器来总结。自定义脚本需要一些维护工作。

赞(0）回复(0）举报 2022-12-07

r7s23pms2#

我对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/

赞(0）回复(0）举报 2022-12-07

9wbgstp73#

我有一个表ABC，其中有一列xyz。基于此，我们需要将输入“sum”更新为xyz的总和。

function updateTotal(){
    var table = document.getElementById("ABC");
    var x = table.rows.length;
    var sumVal = 0;
    for (let i = 3; i < x-4; i++) {
        var value = table.rows[i].cells[3].getElementsByTagName('input')[0].value;
        if(value != null && ""!= value && !isNaN(value)){
            var valueToAdd = parseInt(value);
            sumVal = sumVal+valueToAdd;
        }
    }
    document.getElementById('sum').innerHTML="<td style='font-size: large;' id='sum'>"+sumVal+"</td>";
}

赞(0）回复(0）举报 2022-12-07

我来回答

JSP 如何使用Javascript对单个表列求和？

3条答案

相关问题

热门标签

最新问答