Question

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

我有一个表格，其中该行中的某些TD有一个类＆＃34; calcSumColumn＆＃34;。
对于其中的每一个，我想计算并显示相应列的总和所有相关的 TD计数都包含一个可信的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>

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

1 个答案: