使用动态添加的行以表格形式计算行总计

Question

I'm creating a form to input an invoice with dynamically added rows ( as seen in this image )

I'm using jquery 1.6.2 to calculate Line Total, sum all Line Totals, calculate Tax and display Total. The problem that I'm having is that calculating Line Total only works for the first added row. As you can see on the image above, the first row (Item 1), is fine (2*30=60), but the second row (Item 2) shows the same total as the first one (it should be 4*100=400). Here's the code for this part:

<script type="text/javascript">
var $k = jQuery.noConflict();

$k(function (){
    $k('#item_form').live("keyup", "input[name^=linetotal]", function() {
        var quantity = $k('input[name^=quantity]').val();
        var unitprice = $k('input[name^=unitprice]').val();
        $k('input[name^=linetotal]').val(quantity*unitprice);

        var sum = $k('input[name^=linetotal]').sum();

        $k('#subtotal').val(sum);
        $k('#tax').val(Math.round(sum*10*100)/100);
        $k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
     });
});
</script>   

Any ideas about what should I try? Thank you all!

Answer 1

You are using $k(input[name^=quantity]').val(); to grab the quantity/unitprice, but this grabs all quantity/unitprice inputs, and .val() gets the value of the first one.

You need to get the one on the same line, although it is odd that you are waiting for keyup on the linetotal . Wouldn't you want keyup on quantity and unitprice ?

 $k('input[name^=quantity], input[name^=unitprice]').live("keyup", function() {
        var quantity = parseFloat($k(this).parent().find('input[name^=quantity]').val());
        var unitprice = parseFloat($k(this).parent().find('input[name^=unitprice]').val());
        $k(this).siblings('input[name^=linetotal]').val(quantity*unitprice);

        var sum = $k(this).siblings('input[name^=linetotal]').sum();

        $k('#subtotal').val(sum);
        $k('#tax').val(Math.round(sum*10*100)/100);
        $k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
     });
});

Basic jsfiddle demo: http://jsfiddle.net/jtbowden/YxJCF/

Answer 2

I believe this is due it taking the first input[name^quantity] and first input[name^unitprice] it runs across. Since both rows have the same names, you have to scope your code to make sure it only pulls from its own row and not from others. Does that make sense?