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

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

0 голосов
/ 24 февраля 2010

Я относительный новичок в 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);

  });
 });

Это (по-видимому) суммирует все «количество» ячеек на странице и записывает это в все «общее» ячейки - закрыть, но, очевидно, я не правильно указываю, что каждый итог должен отображаться в его родитель. Я был бы очень признателен, если бы кто-нибудь мог, пожалуйста, поправить меня в том, что мне не хватает, и если есть более простой способ добиться всего остального, я весь в ушах.

Приветствия, свс

Ответы [ 2 ]

0 голосов
/ 29 сентября 2011

Вот как я решил это (это несовершенно): 

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

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

0 голосов
/ 24 февраля 2010

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

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