使用jquery計算每行使用grandtotal的價格

Question

我想要做一個發票腳本，我需要做一些計算。用戶將輸入數量字段和價格字段。系統必須乘以數量*價格並顯示數量字段。總金額應顯示在grandtotal字段中。我試着瀏覽並做了一些事情。它的工作正常<span>，但是當我給一個文本框不工作。蔭非常新的jQuery和IAM沒有得到地方IAM製作mistake.My HTML如下：

<table id="myTable"> 
    <thead> 
     <tr><th>Product name</th><th>Qty</th><th>Price</th> 
    <th align="center"><span id="amount" class="amount">Amount</span> </th></tr> 
    </thead> 
    <tfoot> 
     <tr><td colspan="2"></td><td align="right"><span id="total" class="total">TOTAL</span> </td></tr> 
    </tfoot> 
    <tbody> 

    <tr> 
    <td>Product 1</td><td><input type="text" class="qty" name="qty"></td> 
    <td><input type="text" value="11.60" class="price"></td> 
    <td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td> 
    </tr> 

<tr><td>Product 2</td><td><input type="text" class="qty" name="qty"></td> 
<td><input type="text" value="15.26" class="price"></td> 
<td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td></tr> 
<tr><td></td><td></td><td></td><td><input type="text" class="total" id="total"></td></tr> 
</tbody></table> 

我jQuery是如下：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function(){ 

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


function update_amounts() 
{ 
    var sum = 0.0; 
    $('#myTable > tbody > tr').each(function() { 
     var qty = $(this).find('.qty').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); 
} 
});//]]> 

</script> 

Link To Fiddle

還是有一個更好的方法來處理相同的問題。請幫我解決這個問題。

Answer 1

您還沒有迭代正確的行。並且在乘法之前沒有正確解析值。這是一個不好的做法。

而且你也有同一類的輸入內容的跨越element.You必須沿着目標只有輸入元素.VAL（）來獲取其值設置：

$(document).ready(function(){ 
update_amounts(); 
$('.qty').change(function() { 
    update_amounts(); 
}); 
function update_amounts(){ 
var sum = 0.0; 
$('#myTable > tbody > tr:not(:last)').each(function() { 
    var qty = parseFloat($(this).find('.qty').val() || 0,10); 
    var price = parseFloat($(this).find('.price').val() || 0,10); 
    var amount = (qty*price) 
    sum+=amount; 
    $(this).find('input.amount').val(amount); 
}); 
//just update the total to sum 
$('input.total').val(sum); 
} 
});//]]> 

Working Demo

Answer 2

檢查qauntity是否設置爲tr，否則只執行操作。點擊這裏：https://jsfiddle.net/864wLn3b/試試這個：

請給總跨度，總文本框不同的ID，這樣就可以在它們之間

function update_amounts() 
{ 
    var sum = 0.0; 
    $('#myTable > tbody > tr').each(function() { 
     if($(this).find('.qty').val() != '' && $(this).find('.qty').length != 0) { 
     var qty = $(this).find('.qty').val(); 
     var price = $(this).find('.price').val(); 
     var amount = (qty*price) 
     sum+=amount; 
     $(this).find('.amount').text(''+amount); 
     $(this).find('#amount_input').val(amount); 
     } 
    }); 
    //just update the total to sum 
    $('.total').val(sum); 
} 

Answer 3

從你的問題要回答這個查詢區分：

其與<span>工作正常，但是當我給一個文本框不工作。

對於輸入使用val()分配值。

你的情況

，

$('.total').val(sum); 

Updated Fiddle

function update_amounts() { 
    var sum = 0.0; 
    $('#myTable > tbody > tr').each(function() { 
    var qty = $(this).find('.qty').val(); 
    var price = $(this).find('.price').val(); 
    var amount = parseFloat(qty) * parseFloat(price); 
    amount = isNaN(amount) ? 0 : amount; //checks for initial empty text boxes 
    sum += amount; 
    $(this).find('.amount').text('' + amount); 
    $(this).find('.amount').val('' + amount); // for inputs/textbox 
    }); 
    //just update the total to sum 
    $('.total').text(sum); 
    $('.total').val(sum); // for inputs/textbox 
} 

Answer 4

變化

sum += amount; 

要

if(amount)sum += amount; 

和

$(this).find('.amount').text(''+amount); 

要

$(this).find('.amount').val(''+amount); 

和

$('.total').text(sum); 

要

$('.total').val(sum); 

，擺脫

$(window).load(function(){} 

小提琴：https://jsfiddle.net/trex005/cwvLgouz/

Answer 5

https://jsfiddle.net/AurelianCtin/tb6t5dw1/23/

這裏是一個工作示例。 你有跨度和輸入相同的類，它搞亂了你的代碼。 例子：

<span id="total" class="total">TOTAL</span> 
<input type="text" class="total" id="total"> 

所以，當你正在尋找通過類元素，你要麼跨度或輸入。

Answer 6

你只需要跳過你的.each函數中的最後一個tr元素，因爲我已經爲這兩個產品採用了公共類，併爲每個產品運行.each並計算了金額。試試這個...

$(window).load(function(){ 
 
$(document).ready(function(){ 
 

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

 
function update_amounts() 
 
{ 
 
    var sum = 0.0; 
 
    $('.product').each(function() { 
 
     var qty = $(this).find('.qty').val(); 
 
     var price = $(this).find('.price').val(); 
 
     var amount = (qty*price) 
 
     //alert(amount); 
 
\t \t sum+= amount; 
 
     $(this).find('.amount').val(amount); 
 
    }); 
 
\t $('.total').val(sum); 
 
\t //just update the total to sum 
 
    
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <thead> 
 
     <tr><th>Product name</th><th>Qty</th><th>Price</th> 
 
    <th align="center"><span id="amount" class="amount">Amount</span> </th></tr> 
 
    </thead> 
 
    <tfoot> 
 
     <tr><td colspan="2"></td><td align="right"><span id="total" class="total">TOTAL</span> </td></tr> 
 
    </tfoot> 
 
    <tbody> 
 

 
    <tr class="product"> 
 
    <td>Product 1</td><td><input type="text" class="qty" name="qty"></td> 
 
    <td><input type="text" value="11.60" class="price"></td> 
 
    <td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td> 
 
    </tr> 
 

 
<tr class="product"><td>Product 2</td><td><input type="text" class="qty" name="qty"></td> 
 
<td><input type="text" value="15.26" class="price"></td> 
 
<td align="center"><input type="text" class="amount" id="amount"><span id="amount" class="amount">0</span></td></tr> 
 
<tr><td></td><td></td><td></td><td><input type="text" class="total" id="total"></td></tr> 
 
</tbody></table>