How to sum a single table column using Javascript?

Question

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>

So it comes out as

Category____Amount____Type____Description

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.

Answer 1

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);
    }
}

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.

Answer 2

I have no knowledge about JSP but i assume that Roman C is right.

But if you wan't to solve this with javascript here is a working example:

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

Link to a jsfiddle https://jsfiddle.net/4cetuvno/1/