Calcul des totaux des colonnes dans plusieurs tables à l'aide de

Question

Je suis relativement novice avec jQuery mais j'ai réussi par le passé à assembler quelques scripts simples. J'ai un nouveau défi et je sais que je suis dans la zone mais j'ai besoin d'aide.

J'ai une page html, avec de nombreuses tables dans ce format:

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

J'utilise ce bit de jQuery pour ajouter la classe = "montant" à la troisième cellule:

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

... qui fonctionne comme prévu.

Mon objectif est que jQuery calcule dans chacune des tables multiples le total des cellules 'quantité', et affiche le résultat dans les cellules désignées (tr.total td.total). Avec l'aide d'un javascripter non jQuerying, j'ai bricolé cela ensemble:

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

    }); 
}); 

Ce (apparemment) Totaux toutes les cellules « quantité » dans la page, et écrit dans toutes les les cellules « total » - fermer mais évidemment je ne spécifie pas correctement que chaque total devrait être affiché dans son parent. J'apprécierais grandement que quelqu'un puisse me mettre au courant de ce qui me manque, et s'il y a une façon plus simple de réaliser le reste, je suis tout ouïe.

Cheers, SVS

Answer 1

Voilà comment je l'ai résolu ce (il est imparfait):

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

    }); 
}); 

Cela fonctionne, mais jusqu'à présent seulement pour une seule table; quand il y a plus d'une table dans la page, c'est NG. Je vais devoir revoir ce problème quand j'ai le temps.

Merci tout de même à ceux qui ont contribué, très apprécié.

Answer 2

Fournir un nom de classe pour la td contenant une quantité. et faire quelque chose comme ça

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