如何获得每个动态生成的表的列的总和？

Question

我有一个页面，其中包含每个日期动态生成的表格。每个日期都有一列显示每个产品支付的金额。例如，

<table class="table">
        <thead>
            <tr>
                <th>
                    <b>Product</b>
                </th>
                <th>
                    <b>Amount</b>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    Kroket
                </td>
                <td>
                    € 5.00 <!-- Dynamically generated -->
                </td>
            </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Total:</td>
            <td class="total"></td>
        </tr>
    </tfoot>
</table>

所以在这个页面上是一个按日期排序的表格列表，我想显示总金额。

我希望这个总量显示在 td 元素中，值为 class="total"。为此，我尝试使用以下 JQuery 函数：

function updateTotalOfTotals() {
    $(".table").each(function () {

        var totalSum = 0;
        var $dataRow = $('table tbody tr');

        $dataRow.each(function () {
            // In reality I have some more td elements and the amounts 
            // are in the 4th column.
            $(this).find('td:nth-child(4)').each(function (i) {
                totalSum += parseFloat($(this).text().replace("€", ""));
            });
        });

        var twoPlacedFloatTotalSum = parseFloat(totalSum).toFixed(2);

        $(".total").each(function (i) {
            $(this).html(twoPlacedFloatTotalSum);
        });

    });
}

当我只有一张桌子时，类似的功能确实有效。但是在这里我无法让它工作，因为它显示了每个表中所有表的总数。无论如何，我都不是 JavaScript/JQuery 方面的专家，如果有人能给我提供更多见解，我将不胜感激。

Answer 1

function updateTotalOfTotals() {
    $(".table").each(function () {

        var totalSum = 0;
        //target only the trs from current table
        var $dataRow = $(this).find('tbody tr');

        $dataRow.each(function () {
            $(this).find('td:nth-child(2)').each(function (i) {
                totalSum += parseFloat($(this).text().replace("€", ""));
            });
        });

        var twoPlacedFloatTotalSum = parseFloat(totalSum).toFixed(2);

        //target only the total from current table
        $(this).find(".total").html(twoPlacedFloatTotalSum);

    });
}

演示：Fiddle