javascript - 使用 JavaScript 对 django 生成的表值求和

Question

我有一个表，它由下面的 django for 循环填充。我添加了一些 JavaScript 来对 asset.by_item_weight 列中的所有总计求和/相加。

出于某种原因，我没有得到 totalCol td 中返回的值。

我把script标签放在这个.html的底部，希望在运行JS之前，django生成的值会被加载到td中。

可能是我处理的方法不对或者这个 <script>应该在别的地方。

我曾尝试将脚本标签放入 personal/header.html 中，在结束 body 标签之前，这没有任何区别。

任何帮助将不胜感激。

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

• 为什么要迭代 #sum_table td.totalCol 而你只有一个？
• 为什么要用一堆零预填充数组？
• 为什么要使用数组？

您的代码应该看起来像这样:

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

• 正如 Daniel Roseman 所说，您为什么要在 JS 中执行此操作？