Javascript kullanarak tek bir tablo sütunu nasıl toplamlanır?

Question

İşlemlerim için veri içeren JSP'mde oluşturulmuş bir tablo var: her bir işlem bir satırdır ve kategori, miktar, tür ve açıklama için bir sütun var.

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

Yani

Category____Amount____Type____Description olarak çıkar

Benim masa Struts kullanılarak doldurulur: Başka bir JSP üzerinde bir bölüm seçip "ekranı" basın tablosunu oluşturur sayfasına iletmek . Bu nedenle, tablo mutlaka belirli sayıda satıra sahip olmayacaktır. Yapmaya çalıştığım şey, her bir işlemden Tutar sütununu toplamaktır, böylece toplamı görüntüleyebilirim. Bunu kullanarak JavaScript yapmaya çalıştık ama benim için çalıştı değil: Ben mahvettigini veya daha iyi bir seçenek neyi nerede olabileceğini

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

kimse görebilir miyim? Ayrıca, sütunları toplamak ve tabloya başka bir satır eklemeden toplamı görüntülemek için bir yol var mı? Mümkünse bu ideal olur.

Answer 1

Değişkeniniz tdscls olarak adlandırılmalıdır. İşte çalışan bir örnek.

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

https://jsfiddle.net/34wf5gzs/

. Bunu bir JS çerçevesi kullanarak veya JSP'de bir sayaç kullanarak özetlemekten daha iyidir. Özel komut dosyaları sürdürmek için biraz çaba gerektirir.

Answer 2

JSP hakkında hiçbir bilgim yok ama Roma C'nin doğru olduğunu varsayalım.

Ama burada javascript ile bu çözmek için wan't bir çalışma örneğidir: Bir jsfiddle https://jsfiddle.net/4cetuvno/1/