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

Question

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

我有一个表，其中一行中的一些 TD 有一个类“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。我将第二个每个更改为table tr，因此每一行都将被迭代。对于每一行，我得到与总和具有相同行索引的列（td）。如果它有一个带有contenteditable="true" 的div，那么我会将内容添加到该列的总和中。最后我重置了每一列的总和。

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>