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

Question

On keyup of quantity textbox, the price was changed. But sub total div doesn't change the value​, only if I refresh a page.

Any idea how to calculate sum of each row and change in subtotal div in jquery please.

Thanks.

Answer 1

Have a class assigned to all textfields that you want to consider for subtotal, and listen for change on those textfields and compute subtotal on change. Here is a jsfiddle for the same 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

i just quickly write a simple http://jsfiddle.net/player889/3PRZr/ . Hope this may help you

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