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

Question

I am new to JavaScript / jQuery and hope someone can help me with this.

I have a table with a row where some TDs within that row have a class "calcSumColumn".
For each of these I want to calculate and show the sum of the corresponding column.
All relevant TDs that are to count contain a contenteditable div.

So far I have the following which shows something in the correct TDs in the sum row but it always shows 0 instead of the real sum of the column.
Also, I wasn't really happy of having a nested loop here.

Can someone tell me what I am doing wrong here and also let me know if this can be achieved with only one loop ?

My 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);
});

Example TD to count: (all TDs to count look the same)

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

Example TD to show column sum: (all TDs to show a column sum look the same)

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

Many thanks in advance, Mike

Answer 1

I'd add one more each so I can get each td of each tr. The second each I changed to be for table tr so each row will be iterated over. For each row I get the column(td) that has the same row index as the sum. If it has a div with contenteditable="true" then I will add the content to the sum for that column. Finally I reset the sum for each column.

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>