Come riassumere una singola colonna della tabella usando Javascript?

Question

Ho una tabella generata sul mio JSP che contiene dati per le transazioni: ogni singola transazione è una riga, e c'è una colonna per categoria, quantità, tipo e descrizione.

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

così viene fuori come

Category____Amount____Type____Description

Il mio tavolo è popolata utilizza Struts: seleziono un reparto su un altro JSP, quindi premere il tasto "Display" per inoltrare alla pagina che genera la tabella . Per questo motivo, la tabella non avrà necessariamente un numero di righe impostato. Quello che sto cercando di fare è sommare la colonna Amount da ogni transazione in modo da poter visualizzare il totale. Ho provato a fare questo utilizzando Javascript, ma non ha funzionato per 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> 

chiunque può vedere dove ho incasinato, o quello che una soluzione migliore potrebbe essere? Inoltre, c'è un modo per sommare le colonne e visualizzare il totale senza aggiungere un'altra riga alla tabella? Sarebbe l'ideale se possibile.

Answer 1

La variabile tds deve essere denominata cls. Ecco un esempio funzionante.

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. È meglio riassumere questo utilizzando un framework JS o utilizzando un contatore in JSP. Gli script personalizzati richiedono alcuni sforzi per mantenere.

Answer 2

Non ho conoscenza di JSP ma presumo che Roman C abbia ragione.

Ma se si wan't di risolvere questo con javascript qui è un esempio di lavoro:

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 ad un jsfiddle https://jsfiddle.net/4cetuvno/1/