вычисление итогов столбцов в нескольких таблицах с использованием

Question

Я относительный newb с 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 добавить класс = «количество» в третьей ячейке:

<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

Answer 1

Это, как я решить это (это несовершенный):

$(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. Мне придется вернуться к этой проблеме, когда у меня будет время.

Спасибо всем тем, кто внес свой вклад, высоко оценил.

Answer 2

Введите имя класса для тд, содержащей сумму. и сделать что-то вроде этого

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