Вычисление общей суммы из нескольких таблиц с использованием JQuery

У меня есть четыре динамически сгенерированные таблицы, и в каждой есть ячейка, в которой я вычисляю сумму ячеек в этом столбце, например:

  <td id="sum1"></td>
  <td id="sum2"></td>
  <td id="sum3"></td>
  <td id="sum4"></td>

Я вычисляю эти суммы с помощью оператора SWITCH, в зависимости от того, что пользователи выбирают из раскрывающегося списка:

  <select id="switch_options">
     <option value="1">Option1</option>
     <option value="2">Option2</option>
     <option value="3">Option3</option>
     <option value="4">Option4</option>
   </select>

Поскольку пользователи выбирают различные параметры из раскрывающегося списка и вводят некоторые дополнительные данные в текстовое поле, я динамически строю приведенные выше таблицы и вычисляю сумму следующим образом:

     switch(switch_options)
     {
     case "1":
      //generate table1

      $( '#table1> tbody:last' )
        .hide()
        .append( "<tr><td>" + data.food_name + "</td>" + "<td class=amount>"
          + data.food_amount + "</td>" + "<td>" + data.food_serving + "</td>" 
          + "<td>" + data.protein + "</td>" + "<td>" + data.fats + "</td>" 
          + "<td>" + data.carbs + "</td>" + "<td>" + data.sugar + "</td>" 
          + "<td class=cal_bk>" + calories + "</td>" 
          + "<td><img class=delete src=images/del.jpg /></td></tr>" )
        .fadeIn( 'slow' );      

     //Calculate totals for table1
     calculateSumbk();
        function calculateSumbk() {
          $('#table1').each(function(){
            // iterate through 'cal' cells in each row:
            $("td.cal_bk").each(function() {
                bk_sum += parseInt($(this).text());
            }); 
            $("#sum1").html(bk_sum);                            
          }); 
        }

     case "2":
      //generate table2, etc.

У меня есть отдельная таблица, в которой я хотел бы рассчитать общие итоги всех других таблиц в такой ячейке:

    <td id="totals"></td>

Проблема в том, что я, кажется, не нахожу простого способа сделать это - тот факт, что я вычисляю итоги для каждой таблицы в соответствии с ее соответствующим оператором переключения, кажется, мешает.

Любые идеи приветствуются!


jquery html-table totals cells
person Cucurigu    schedule 23.01.2012    source источник
comment
Хорошо, проблема решена, я использовал плагин JQuery Calculation, и он отлично работает.   -  person Cucurigu    schedule 31.01.2012
comment
Чтобы другие люди, читающие этот вопрос в будущем, могли бы добавить свое собственное решение вопроса. (Можно ответить на свой вопрос.)   -  person Richie Cotton    schedule 03.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

Это должно помочь вам начать:

$("select").change(function() {
    var qty = $(this).val();

// get the price cell by moving up a level and searching for
// the descendant with a class name beginning with `price'.
// Remove the dollar sign to do math
var price = $(this).closest("tr")
                   .find("td[class^=price]")
                   .html().split("$")[1];

// a quantity is a whole number but a price is a float
var total = parseInt(qty) * parseFloat(price);

// write the total for this book to the 'total' cell
$(this).closest("tr")
       .find("td[class^=total]")
       .html("$" + total);

// sum up all the totals
var grandTotal = 0;
$("td[class^=total]").each(function() {
    grandTotal += parseFloat($(this).html().split("$")[1]); 
});

// update the grandtotal cell to the new total
$(".grandtotal").html("$" + grandTotal);
});​

Другими словами, вам необходимо:

1 - Получить количество из значения выбранного параметра.

2. Получите цену из ячейки в той же строке, класс которой начинается с «цена», умножьте ее на количество и обновите ячейку «Итого» в той же строке.

3 - (Повторно) рассчитайте общий итог (сумму всех итогов) и поместите это значение в .grandtotal cell.

Попробуйте здесь: http://jsfiddle.net/kYssr/4/

person Karthikeyan S    schedule 13.01.2015