Подсчет общего итога по нескольким таблицам с использованием JQuery - PullRequest
Новая
       13

Подсчет общего итога по нескольким таблицам с использованием JQuery

0 голосов
/ 24 января 2012

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

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

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

Любые идеи очень ценятся!

1 Ответ

0 голосов
/ 13 января 2015

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

$("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- Получите цену из ячейки в той же строке, класс которой начинается с ' цена ', умножьте ее на количество и обновите ячейку 'total' в той же строке.

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

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

...