Question

我有一组产品，每一行都有数量，价格和总和，如下图所示：

enter image description here

我想用jquery来自动计算每行中的Sum和最后的总数，而不退出页面。

我对jquery没有太大的经验。

我该怎么做？

非常感谢。

Answer 1

这是我想你想做的事情的小提琴：

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>

<强>更新：

以下是具有可更新数量的版本：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 2

这个怎么样：http://jsfiddle.net/QmTNZ/

Answer 3

假设您的命令是小数点（来自法语编号系统）下面的那个也应该与表格一起使用等等。

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

我知道这是一个旧版本，但我发现Neal的回答非常有用，我认为这可以在各种情况下提供帮助。

此版本允许数量和价格的输入，并且还允许将行动态添加到表中并仍然正常运行。我还添加了四舍五入的混合，因为我认为这很可能是货币计算（如果不需要，只删除.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>

jquery - 计算产品的总和和总数

4 个答案: