使用JQuery从多个表计算总计

时间:2012-01-23 23:18:44

标签: jquery html-table cells totals

我有四个动态生成的表,每个表都有一个单元格,用于计算该列中单元格的总和 - 如下所示:

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

问题是我似乎找不到一个简单的方法 - 我在每个表的相应switch语句下计算总计的事实似乎是挡路了。

非常感谢任何想法!

1 个答案:

答案 0 :(得分:0)

这应该让你开始:

$("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/