title: How to sum a single table column using Javascript?
body: <p>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.  </p>
  
  <pre><code>&lt;table class="table table-striped" id="res"&gt;
          &lt;tr&gt;
              &lt;th&gt;Category&lt;/th&gt;
              &lt;th&gt;Amount&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
          &lt;c:forEach var="element" items="${sessionScope.pick}"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;c:out value="${element.category}" /&gt;&lt;/td&gt;
                  &lt;td class="countable"&gt;
                      &lt;fmt:formatNumber type="currency" currencyCode="USD" 
                      value="${element.amount}"&gt;&lt;/fmt:formatNumber&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;c:out value="${element.entry_Type}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;c:out value="${element.description}" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/c:forEach&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>So it comes out as</p>
  
  <p>Category____Amount____Type____Description</p>
  
  <p>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:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;
  
      var cls = document.getElementById("res").getElementsByTagName("td");
      var sum = 0;
      for (var i = 0; i &lt; cls.length; i++){
          if(tds[i].className == "countable"){
              sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
          }
      }
      document.getElementById("res").innerHTML.append("&lt;tr&gt;&lt;td&gt; Total Balance &lt;/td&gt;&lt;td&gt;" + sum + "&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;");
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>