javascript - 更改文本框中的值时，通过jQuery计算每一行的总和

Question

在数量文本框的 keyup 上，价格发生了变化。但是 sub total div 不会改变值，只有当我刷新页面时。

请知道如何计算每行的总和并subtotal在 jquery 中更改 div。

谢谢。

Answer 1

将一个类分配给您要考虑进行小计的所有文本字段，并侦听这些文本字段的更改并计算更改时的小计。这是相同的 jsfiddle http://jsfiddle.net/ravikumaranantha/Sb6zS/3/

<table>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="10" />
            <input class="price" type="hidden" value="20" />
        </td>
        <td>$20</td>
    </tr>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="20" />
            <input class="price" type="hidden" value="40" />
        </td>
        <td>$40</td>
    </tr>
</table>
<div class="subtotal"></div>


$('.quantity').on('change', function(){

    var subtotal = 0;
    $('.quantity').each(function(){
        var $this = $(this);
        var quantity = parseInt($this.val());
        var price = parseFloat($this.siblings('.price').val())
        subtotal+=quantity*price;
    })
    $('.subtotal').text(subtotal);

})
$('.quantity').trigger('change')

Answer 2

我只是快速写了一个简单的http://jsfiddle.net/player889/3PRZr/。希望这可以帮助你

$(function() {
  $('#B').bind('keyup', function() {
    $('#b').text ($('#B').val() *6) ;
}).keyup(function(){
    $("#subtotal").text( $('#A').val() *5 + $('#B').val() *6);
});

$('#A').bind('keyup', function() {
    $('#a').text ($('#A').val() *5) ;
  }).keyup(function(){
    $("#subtotal").text( $('#A').val() *5 + $('#B').val() *6);
 });
});

A : <input type="text" id="A"/> x5 
<div id="a"></div>
B : <input type="text" id="B"/> x 6
<div id="b"></div>
sum: <div id="subtotal"></div>