calculating column totals in multiple tables using

I'm a relative newb with jQuery but I've managed in the past to cobble together a few simple scripts. I've got a new challenge and I know I'm 'in the zone but I need some help.

I have an html page, with numerous tables in this format:

<table class="tableClass" id="tableID">
  <col class="date" />
  <col cla开发者_Go百科ss="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>

I'm using this bit of jQuery to add the class="amount" to the third cell:

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

... which works as intended.

My objective is to have jQuery calculate in each of multiple tables the total of the 'amount' cells, and display the result in the designated cells (tr.total td.total). With help from a non-jQuerying javascripter, I've cobbled this together:

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

  });
 });

This (apparently) totals all 'amount' cells in the page, and writes it in all the 'total' cells - close but obviously I'm not correctly specifying that each total should be displayed in its parent. I'd greatly appreciate it if anyone can please straighten me out on what I'm missing, and if there's a simpler way to achieve the rest of it, I'm all ears.

Cheers, svs

Provide a class name for the td containing amount. and do something like this

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

This is how I've resolved this (it's imperfect):

$(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);

    });
});

This works but so far only for a single table; when there is more than one table in the page, it's NG. I'll have to revisit this issue when I have time.

Thanks just the same to those who contributed, much appreciated.