Sum django generated table values with JavaScript

Question

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.

For some reason I am not getting the value returned in the totalCol td.

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.

It might be that I have approached this is the wrong way or that this <script> should be else where.

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

Any Help would be much appreciated.

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

• Why do you iterate over #sum_table td.totalCol while you have only one?
• Why do you prefill your array with a bunch of zeros?
• Why do you use an array at all?

Your code should rather look like this:

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

• And as Daniel Roseman said, why are you doing this in JS?