jQuery：如何计算和显示列的总和（部分工作代码）

Question

我是 JavaScript / jQuery 的新手，希望有人能帮助我。

我有一个 table 行，其中该行中的一些 TD 有一个 class“calcSumColumn”。
对于其中的每一个，我都想计算并显示相应列的总和。
所有要计算的相关 TD 都包含一个 contenteditable div。

到目前为止，我有以下内容在总和行的正确 TD 中显示了某些内容，但它始终显示 0 而不是列的实际总和。
另外，我不太高兴这里有一个嵌套循环。

谁能告诉我我做错了什么，并告诉我这是否可以只用一个循环来实现？

我的jQuery:

var rowIndex,
    sumColumn = 0,
    current = $(e.target);
// ...
$(this).closest('table').find('td.calcSumColumn').each(function(){
    rowIndex = $(this).index();
    $(this).closest('table').find('td').eq(rowIndex).each(function(){
        sumColumn += Number( $(this).find('div').text() );
    });
    $(this).text(sumColumn);
});

要计算的 TD 示例：（所有要计算的 TD 看起来都一样）

<td class="calcInOut editable txtRight"><div contenteditable="true"></div></td>

显示列总和的 TD 示例：（显示列总和的所有 TD 看起来都一样）

<td class="calcSumColumn txtRight"></td>

非常感谢，麦克

Answer 1

我会再添加一个 each 这样我就可以得到每个 tr 的每个 td。我将第二个 each 更改为 table tr 因此每一行都将被迭代。对于每一行，我得到与总和具有相同行索引的列（td）。如果它有 div 和 contenteditable="true"，那么我会将内容添加到该列的总和中。最后，我重置了每列的总和。

var rowIndex,sumColumn = 0;
    //current = $(e.target);
// ...
$('table').find('td.calcSumColumn').each(function(){
    rowIndex = $(this).index();
    $('table tr').each(function(){
        $('td', this).eq(rowIndex).each(function(){
            if($('div[contenteditable="true"]', this).length==1)
                sumColumn += Number( $('div[contenteditable=true]', this).text() );
        });
    });
    $(this).text(sumColumn);
    sumColumn = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id='sumTable' border=1>
    <tr>
        <td><div contenteditable="true">3</div></td>
        <td><div contenteditable="true">1</div></td>
        <td><div contenteditable="true">3</div></td>
        <td><div contenteditable="true">3</div></td>
    </tr>
    <tr>
        <td><div contenteditable="true">3</div></td>
        <td><div contenteditable="true">5</div></td>
        <td><div contenteditable="true">4</div></td>
        <td><div contenteditable="true">8</div></td>
    </tr>
    <tr>
        <td>tt</td>
        <td class='calcSumColumn'></td>
        <td>tt</td>
        <td class='calcSumColumn'></td>
    </tr>
</table>

jQuery：如何计算和显示列的总和（部分工作代码）

jQuery: How to calculate and show sum of columns (partially working code)

javascript

each

jquery

loops

nested-loops