jquery - 使用jquery计算每行的数量价格和总计

Question

我正在尝试编写一个发票脚本，我需要在其中进行一些计算。用户将输入数量字段和价格字段。系统必须乘以数量*价格并显示在金额字段中。金额总计应显示在总计字段中。我尝试浏览并做了下面的一些事情。它与 <span> 一起工作正常但是当我给出一个文本框时它不起作用。我对 jquery 很陌生，我不明白我犯错的地方。我的 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

根据您的问题回答此查询:

Its working fine with <span> but when i give a text box its not working.

对于输入，请使用 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
}