Question

我正在尝试制作一个发票脚本，我需要在其中进行一些计算。用户将输入数量字段和价格字段。系统必须乘以数量*价格并显示金额字段。金额总计应显示在grandtotal字段中。我试图浏览并做了以下的事情。它与<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

从您的问题中回答此问题：

它与<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 2

更改

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 3

您只需要跳过.each函数中的最后一个tr元素，为此我已经为这两个产品采用了通用类，并为每个产品运行.each并计算了金额。试试这个......

＆＃13;

$(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);
		sum+= amount;
        $(this).find('.amount').val(amount); 
    });
	$('.total').val(sum);
	//just update the total to sum  
   
}
});

＆＃13;

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

＆＃13;

Answer 4

您没有迭代正确的行。并且在进行乘法之前没有正确解析值。这是一种不好的做法。

此外，您还有与span元素相同的输入元素类。您必须仅使用.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 5

检查是否在tr中设置了qauntity，然后才执行操作。点击此处：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 6

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

这是一个工作示例。你有相同的课程和输入，它会弄乱你的代码。例如：

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

因此，当您按类搜索元素时，您可以获得范围或输入。

使用jquery计算具有grandtotal的每行的数量价格

6 个答案: