jQuery的計算從場分總 -

Question

我準備了這份jsfiddle

的問題數量和價格由類和盛大總和我有一個包含產品數量*價格=子總 這也必須動態地計算多行總計所有小計總額。而最大的問題是觸發器，因爲我們可能沒有在qty選擇字段有更改觸發器..對我來說真的很複雜。 我至今在這裏堆積：

$(document).ready(function() {  
    var qty=$('.qty').val(); 
    var price = $('.price').val(); 
    var sum = 0; 

    $('.amount').each(function() { 
     sum += parseFloat($(this).text()); 
    }); 
}); 

請給我想法爲：

1. 從而啓動使用，因此它可以在頁面加載計算，以及如果數量下拉過改變。
2. 如何計算每行第一個

感謝您的幫助和時間提前！

Answer 1

你有你的答案在這裏：http://jsfiddle.net/kY98p/10/

我改變了html使用標籤thead和tfoot的頁眉和頁腳

它只是一個循環，您可以獲得數量和價格並更新數量......

這裏是你要調用的函數：

function update_amounts() 
{ 
    var sum = 0.0; 
    $('#myTable > tbody > tr').each(function() { 
     var qty = $(this).find('option:selected').val(); 
     var price = $(this).find('.price').val(); 
     var amount = (qty*price) 
     sum+=amount; 
     $(this).find('.amount').text(''+amount); 
    }); 
    //just update the total to sum 
    $('.total').text(sum); 
} 

而且你需要的事件是：

$('.qty').change(function() { 
    update_amounts(); 
}); 

UPDATE：的jsfiddle總：http://jsfiddle.net/kY98p/11/

Answer 2

Fiddle Demo

$(document).ready(function() { 
    var amt = $('.amount:gt(0)'), //select element with class greater than one 
     tot = $('#total'); // cache selectors 
    function calculator() { 
     amt.text(function() { // set text of class amount elements 
      var tr = $(this).closest('tr'); // get tr 
      var qty = tr.find('.qty').val(); // find it in current tr and get value of element with class qty 
      var price = tr.find('.price').val(); //get price 
      return parseFloat(qty) * parseFloat(price); // return product 
     }); 
     tot.text(function() { //get total 
      var sum = 0; //set sum = 0 
      amt.each(function() { //run through all element with class amount 
       sum += parseFloat($(this).text()); // add text to sum 
      }); 
      return sum; //set sum to total 
     }); 
    } 
    calculator(); //call the above function 
    $('.qty,.price').change(calculator);// run calculator function when element with class qty or price is changed 
}); 

Answer 3

這裏是你的小提琴（http://jsfiddle.net/kY98p/20/）有一個小的DOM更新工程的解決方案。我把表頭放在THEAD中，這樣你就可以將TBODY TR行指向那些有數據的行。

這裏我們有計算每行和整個表的總和的函數。 當您更改某行時，我們會重新計算該行，然後重新計算總計。 當我們加載頁面時，我們重新計算一切。

$(document).ready(function() { 

    function computeRowTotal(row) { 
     var $row = $(row) 
     var qty = $row.find('.qty').val(); 
     var price = $row.find('.price').val(); 
     if (qty && price) { 
      $row.find('.amount').html(qty * price); 
     } 
    } 

    function computeTotal() { 
     var total = 0.0 
     $('tbody tr .amount').each(function() { 
      console.log('T', $(this).text()); 
      total += parseFloat($(this).text()); 
     }) 
     $('tbody tr .total').html("Total: " + total); 
    } 

    function updateTable() { 
     $('tbody tr').each(function (row) { 
      computeRowTotal(this) 
     }); 
     computeTotal(this) 
    }; 
    $('select').bind('change', function() { 
     computeRowTotal($(this).closest('tr')); 
     computeTotal(); 
    }); 

    updateTable(); 

}); 

Answer 4

你可以試試這個（我改變了你的html模板）。解決方案： 1.計算每一行（找到最接近的輸入並從中獲取數據） 2.計算總數並將其放在範圍內 3.如果您將添加更多選中的項目（使用我的工作班）

$(".work").on("change", function(){ 
     var total = 0; 
     $(".work").each(function(){ 
      var val = $(this).closest("tr").find("input[type='text']").val(); 
      total = total + ($(this).val()*val || 0); 
     }); 
     $(".total").text(total); 
    }); 

和HTML

<table> 
    <tbody> 
    <tr> 
     <th>Product name</th> 
     <th>Qty</th> 
     <th>Price</th> 
     <th align="center"><span id="amount" class="amount">Amount</span></th> 
    </tr> 
    <tr> 
     <td>Product 1</td> 
     <td> 
     <select value="" class="qty work" name="qty"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
     </td> 
     <td><input type="text" value="11.60" class="price"></td> 
     <td align="center"><span id="amount" class="amount">0</span> eur</td></tr> 
    <tr> 
     <td>Product 2</td><td> 
     <select value="" class="qty work" name="qty"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
     </td> 
     <td><input type="text" value="15.26" class="price"></td> 
     <td align="center"><span id="amount" class="amount">0</span> eur</td></tr> 
    <tr> 
     <td colspan="2"></td> 
     <td align="right"><span id="total" class="total">TOTAL</span> </td> 
    </tr> 
    </tbody> 
</table> 

而且work demo