jQuery的 - 計算的總和，總的產品

Question

我在每一行的一組產品，數量，價格，總喜歡在這樣的畫面：

我想用jQuery自動使它計算每行中的總和和最後的總數，而不必退出頁面。

我對jquery沒有太大的經驗。

我該怎麼做？

非常感謝。

Answer 1

如何：http://jsfiddle.net/QmTNZ/

Answer 2

假設你comman意味着是一個小數點（從法國編號系統） 下一個應該與表工作藏漢等。

<ul class="row"> 
    <li class="qty">2</li> 
    <li class="price">2.45</li> 
    <li class="sum"></li> 
</ul> 
<ul class="row"> 
    <li class="qty">3</li> 
    <li class="price">24.5</li> 
    <li class="sum"></li> 
</ul> 
<div id="total"></div> 


//jquery 
$('.row').each(function(i,n){ 
    var sum = (parseFloat($(n).children('.qty')) * parseFloat($(n).children('.price'))); 
    $(n).children('.sum').text(sum) 
}).delay(1).queue(function(){ 
    var total = 0; 
    $('.sum').each(function(i,n){ 
     total += parseFloat($(n).text()); 
    }); 
    $('#total').text(total); 
}); 

Answer 3

這裏是你想要做什麼，我覺得小提琴：

http://jsfiddle.net/maniator/qEy3L/

JS：

function getTotal(){ 
    var total = 0; 
    $('.price').each(function(){ 
     total += parseFloat(this.innerHTML) 
    }); 
    $('#total').text(total); 
} 

getTotal(); 

HTML：

<table> 
    <thead> 
     <tr> 
      <th>QTY</th> 
      <th>PRICE</th> 
      <th>SUM</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>2</td> 
      <td>1.25</td> 
      <td class='price'>2.50</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>2.10</td> 
      <td class='price'>6.30</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>10.50</td> 
      <td class='price'>52.50</td> 
     </tr> 
     <tr> 
      <td colspan='2'>Total</td> 
      <td id='total'></td> 
     </tr> 
    </tbody> 
</table> 

---

UPDATE：

下面是可更新的數量版本：http://jsfiddle.net/maniator/qEy3L/5/

JS：

function getTotal(){ 
    var total = 0; 
    $('.sum').each(function(){ 
     total += parseFloat(this.innerHTML) 
    }); 
    $('#total').text(total); 
} 

getTotal(); 

$('.qty').keyup(function(){ 
    var parent = $(this).parents('tr'); 
    var price = $('.price', parent); 
    var sum = $('.sum', parent); 
    var value = parseInt(this.value) * parseFloat(price.get(0).innerHTML||0); 
    sum.text(value); 
    getTotal(); 
}) 

HTML：

<table> 
    <thead> 
     <tr> 
      <th>QTY</th> 
      <th>PRICE</th> 
      <th>SUM</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input class='qty' size='1'/></td> 
      <td class='price'>1.25</td> 
      <td class='sum'>0</td> 
     </tr> 
     <tr> 
      <td><input class='qty' size='1'/></td> 
      <td class='price'>2.10</td> 
      <td class='sum'>0</td> 
     </tr> 
     <tr> 
      <td><input class='qty' size='1'/></td> 
      <td class='price'>10.50</td> 
      <td class='sum'>0</td> 
     </tr> 
     <tr> 
      <td colspan='2'>Total</td> 
      <td id='total'></td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

我知道這是一個古老的，但是我發現尼爾的回答非常有幫助，並且做出了一個分拆，我認爲這可以在各種方面有所幫助的情況。

此版本允許數量和價格的輸入，並且還允許將行動態添加到表格並仍然正常工作。我還添加了四捨五入的組合，因爲我認爲這很可能是一種貨幣計算（如果不需要，只需刪除.toFixed(2)的所有實例）。

的jQuery：

$(document).ready(function() { 
    $("#order-entry").on("keyup", ".form-calc", function() { 
     var parent = $(this).closest("tr"); 
     parent.find(".form-line").val((parent.find(".form-qty").val() * parent.find(".form-cost").val()).toFixed(2)); 
     var total = 0; 
     $(".form-line").each(function(){ 
      total += parseFloat($(this).val()||0); 
     }); 
     $("#total").text(total.toFixed(2)); 
    }); 
}); 

HTML：

<table id="order-entry"> 
    <thead> 
     <tr> 
      <th>Quantity</th> 
      <th>Price</th> 
      <th>Sum</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input class="form-calc form-qty" value="1"></td> 
      <td><input class="form-calc form-cost" value="10.00"></td> 
      <td><input class="form-line" value="0" readonly></td> 
     </tr> 
     <tr> 
      <td><input class="form-calc form-qty" value="2"></td> 
      <td><input class="form-calc form-cost" value="5.33"></td> 
      <td><input class="form-line" value="0" readonly></td> 
     </tr> 
     <tr> 
      <td colspan="2">Total</td> 
      <td id="total"></td> 
     </tr> 
    </tbody> 
</table>