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

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

1 个答案: