如何獲得每個動態生成的表格的總和？

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