Sum django generated table values with JavaScript
<p>I have a table which is populated by a django for loop below. I have added some JavaScript to sum/add all the totals in the asset.by_item_weight column.</p>

<p>For some reason I am not getting the value returned in the totalCol td.</p>

<p>I have put the script tag at the bottom of this .html in the hope that the django generated values will be loaded into the td before the JS is run.</p>

<p>It might be that I have approached this is the wrong way or that this <code>&lt;script&gt;</code> should be else where. </p>

<p>I have tried to put the script tag into the personal/header.html before the closing body tag which made no difference.  </p>

<p>Any Help would be much appreciated.</p>

<pre><code> {% extends "personal/header.html" %}


{% block content %}

&lt;h1 class='text-center'&gt;This is the full asset list not split by owner&lt;/h1&gt;&lt;/br&gt;




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

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

            &lt;/tr&gt;
    {% endfor %}

            &lt;tr class="totalColumn"&gt;
                &lt;td class=""&gt;&lt;/td&gt;
                &lt;td class=""&gt;&lt;/td&gt;
                &lt;td class=""&gt;&lt;/td&gt;
                &lt;td class=""&gt;&lt;/td&gt;
                &lt;td class="totalCol"&gt;Total:&lt;/td&gt;
                &lt;td class=""&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

&lt;p class="text-center"&gt;{% include "sam/includes/backtosam.html" %}&lt;/p&gt;



{% endblock %}
&lt;script&gt;
       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]);
            });

        });
&lt;/script&gt;
</code></pre>