使用计算多个表中的列总计答案

【问题标题】：calculating column totals in multiple tables using使用计算多个表中的列总计
【发布时间】：2011-01-20 09:09:03
【问题描述】：

我是 jQuery 的相对新手，但我过去曾设法拼凑一些简单的脚本。我遇到了一个新的挑战，我知道我已经完成了任务，但我需要一些帮助。

我有一个 html 页面，其中有许多这种格式的表格：

<table class="tableClass" id="tableID">
  <col class="date" />
  <col class="reference" />
  <col class="amount" />
  <thead>
   <tr>
    <th class="date">Date</th>
    <th class="reference">Reference</th>
    <th class="amount">Amount</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>01-11-09</td>
    <td>text here</td>
    <td>33.66</td>
   </tr>
      <!—   [ etc., many more rows ]   -->

   <tr class="total">
    <td colspan="2">TOTAL:</td>
    <td class="amount total"></td>
   </tr>
  </tbody>
 </table>

我正在使用这段 jQuery 将 class="amount" 添加到第三个单元格：

 <script type="text/javascript">
  $(document).ready(function(){
   $("tbody tr td:nth-child(3)").addClass("amount").append("<span>$<\/span>");
   });
 </script>

...按预期工作。

我的目标是让 jQuery 在多个表格中的每个表格中计算“数量”单元格的总数，并在指定的单元格中显示结果 (tr.total td.total)。在非 jQuerying javascripter 的帮助下，我将其拼凑在一起：

// instantiate the 'total' variable
 var total = 0;
 var currTotal = 0.00;

 $(document).ready(function(){

  $('table').each(function(){

   // iterate through 3rd cell in each row in the tbody (td with an amount):
   $("#tableID tbody tr td:nth-child(3)").css("color", "red").each(function() {
    total += parseInt(100 * parseFloat($(this).text()));
   });

   currTotal = total/100;
   alert('Total = $ ' + currTotal);

   $(this).parent().find(".total .amount").html('<span>$<\/span>' + currTotal);

  });
 });

这（显然）总计页面中的所有“金额”单元格，并将其写入所有“总计”单元格 - 关闭但显然我没有正确指定应显示每个总计在其父级中。如果有人能帮我弄清楚我所缺少的东西，我将不胜感激，如果有更简单的方法来实现其余部分，我会全力以赴。

干杯，svs

【问题讨论】：

标签： jquery loops parent each

【解决方案1】：

为包含数量的 td 提供类名。并做这样的事情

var totalAmount = 0.0;
$("#tableid td.classname").each ( function(){
    var currentAmount = parseFloat ( $(this).text());
    // if your td text contains $ symbol at the beginning you can do like this
    //var currentAmount = parseFloat ( $(this).text().substring(1));
    totalAmount += currentAmount; 
});

$("spanid").text(totalAmount);

【讨论】：

感谢 rahul，但我不太明白这一点。我已经尝试过并更新了类以匹配我的 html，但没有任何乐趣。顺便说一句，您首先建议提供一个类名；根据我的第一个 jQuery 块，is 将 class="amount" 应用于每行的第三个。我认为这里的棘手部分是对多个表中的每一个都执行了唯一的计算，因此，在我之前的尝试中，'each' 函数用于表，然后在每个循环中我将单元格指定为循环通过/总计...

【解决方案2】：

这就是我解决这个问题的方法（它不完美）：

$(document).ready(function(){

    //  1. select the last cell in all but the last row, add the 'amount' class and the dollar sign:
    $("tr:not(:last) td:last-child").addClass("amount").append("<span>$<\/span>");

    //  2. select the last cell in the last row, add the 'total-amount' class and the dollar sign:
    $("tr:last td:last-child").addClass("total-amount").append("<span>$ <\/span>");


    $('table').each(function(){

        // instantiate the 'total' variable
        var sum = 0;
        var sumTotal = 0.00;

        // iterate through 'amount' cells in each row:
        $("td.amount").each(function() {
            sum += parseInt(100 * parseFloat($(this).text()));
            sumTotal = sum/100;
//          alert(sumTotal);
        });

        $('.total-amount').append(sumTotal);

    });
});

这有效，但到目前为止仅适用于单个表；当页面中有多个表格时，它是 NG。有时间我将不得不重新审视这个问题。

同样感谢那些做出贡献的人，非常感谢。

【讨论】：