Question

我是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在多个表中计算 总计'amount'单元格，并将结果显示在指定的单元格中（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

Answer 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);

Answer 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。我有时间的话，我将不得不重新审视这个问题。

感谢那些贡献的人，非常感谢。

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

2 个答案: