<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery_1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('.inv-detail').delegate('.qty,.price','keyup',function(){
var tr=$(this).parent().parent();
var price=tr.find('.price').val()-0;
var qty=tr.find('.qty').val()-0;
var amt=price*qty;
tr.find('.amt').html(amt);
total();
});
function total(){
var gg=0;
$('.amt').each(function(i, element) {
var amt=$(this).html()-0;
gg +=amt;
});
$('.current').html(gg);
}
});
</script>
</head>
<body class="inv-detail">
<form>
<table>
<thead>
<tr>
<td>Qty</td>
<td>Price</td>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="qty"/></td>
<td><input type="text" class="price"/></td>
<td><b class="amt"></b></td>
</tr>
<tr>
<td><input type="text" class="qty"/></td>
<td><input type="text" class="price"/></td>
<td><b class="amt"></b></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Expanse</td>
<td>Current Bill</td>
<td>Total Bill</td>
</tr>
<tr>
<td><input type="text" class="expanse"/></td>
<td><b class="current"></b></td>
<td><b class="total"></b></td>
</tr>
</tfoot>
</table>
</body>
</html>