jsp - How to sum a single table column using Javascript? -

i have generated table on jsp contains data transactions: each individual transaction row, , there's column category, amount, type, , 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 comes out as

category____amount____type____description

my table populated using struts: select department on jsp, press "display" forward page generates table. because of this, table won't have set number of rows. i'm trying add amount column each transaction can display total. tried using javascript hasn't worked me:

<script src="http://code.jquery.com/jquery-2.1.4.min.js">      var cls = document.getelementbyid("res").getelementsbytagname("td");     var sum = 0;     (var = 0; < 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 see i've messed up, or better option might be? also, there way sum columns , display total without adding row table? ideal if possible.

your variable tds should named cls. here working example.

https://jsfiddle.net/34wf5gzs/

for (var = 0; < cls.length; i++){     if(cls[i].classname == "countable"){         sum += isnan(cls[i].innerhtml) ? 0 : parseint(cls[i].innerhtml);     } } 

roman c right though. you're better off summing using js framework or using counter in jsp. custom scripts require effort maintain.