Sum django generierte Tabellenwerte mit JavaScript

Question

Ich habe eine Tabelle, die von einer Django for-Schleife bevölkert wird. Ich habe JavaScript hinzugefügt, um alle Summen in der Spalte asset.by_item_weight zu addieren.

Aus irgendeinem Grund bekomme ich nicht den Wert in der TotalCol td zurückgegeben.

Ich habe das Skript-Tag am Ende dieser .html in der Hoffnung, dass die Django generierten Werte in die td geladen werden, bevor die JS ausgeführt wird.

Es könnte sein, dass ich das angegangen habe, ist dies der falsche Weg oder dass dieser <script> wo anders sein sollte.

Ich habe versucht, das Skript-Tag in die persönliche/header.html vor dem schließenden Body-Tag, die keinen Unterschied gemacht.

Jede Hilfe würde sehr geschätzt werden.

{% extends "personal/header.html" %} 


{% block content %} 

<h1 class='text-center'>This is the full asset list not split by owner</h1></br> 




    <table id="sum_table" class="well table table-striped text-center"> 
     <thead> 
      <tr class="text-center titlerow"> 
       <td class="text-center">Asset ID:</td> 
       <td class="text-center">Asset Name:</td> 
       <td class="text-center">Asset Quantity:</td> 
       <td class="text-center">Asset Weight/kg:</td> 
       <td class="text-center">Total Weight/kg:</td> 
       <td class="text-center">Asset Owner:</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="text-center"> 

    {% for asset in object_list %} 
       <td><a href="/sam/assets/{{ asset.id }}">{{ asset.id }}</></td> 
       <td>{{ asset.asset_name }}</td> 
       <td>{{ asset.asset_quantity }}</td> 
       <td>{{ asset.asset_weight }}</td> 
       <td class="rowDataSd">{{ asset.by_item_weight }}</td> 
       <td><a href="/sam/owners/">{{ asset.asset_owner }}</></td> 

      </tr> 
    {% endfor %} 

      <tr class="totalColumn"> 
       <td class=""></td> 
       <td class=""></td> 
       <td class=""></td> 
       <td class=""></td> 
       <td class="totalCol">Total:</td> 
       <td class=""></td> 
      </tr> 
     </tbody> 
    </table> 

<p class="text-center">{% include "sam/includes/backtosam.html" %}</p> 



{% endblock %} 
<script> 
     var totals=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; 
     $(document).ready(function(){ 

      var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')"); 

      $dataRows.each(function() { 
       $(this).find('.rowDataSd').each(function(i){   
        totals[i]+=parseInt($(this).html()); 
       }); 
      }); 
      $("#sum_table td.totalCol").each(function(i){ 
       $(this).html("total:"+totals[i]); 
      }); 

     }); 
</script> 

Answer 1

• Warum iterieren Sie über #sum_table td.totalCol, während Sie nur eine haben?
• Warum füllen Sie Ihr Array mit einer Reihe von Nullen auf?
• Warum verwenden Sie überhaupt ein Array?

Der Code sollte eher so aussehen:

var total = 0; 
$('#sum_table tr td.rowDataSd').each(function() { 
    total += parseInt($(this).text()); 
}); 
$('#sum_table td.totalCol').text("total: " + total); 

• Und als Daniel Roseman sagte, warum machst du das in JS?