<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>Outstanding</td>
<td>Paid</td>
</tr>
<tr>
<td><input type="text" class="expanse"/></td>
<td><input type="text" class="outstanding"/></td>
<td><input type="text" class="paid"/></td>
</tr>
<tr>
<td></td>
<td>Current Bill</td>
<td>Total Bill</td>
</tr>
<tr>
<td></td>
<td><b class="current"></b></td>
<td><b class="total"></b></td>
</tr>
</tfoot>
</table>
$(function(){
$(document).on('keyup', '.qty,.price,.expanse, .outstanding, .paid', function(){
var total = 0;
var exp = $('.expanse').val();
var outst = $('.outstanding').val();
var paid = $('.paid').val();
$(this).parents('table:first').find('tr').each(function(){
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
var amt = 0;
if(qty != '' && !isNaN(qty) && price != '' && !isNaN(price)){
amt = qty*price;
total = total+amt;
}
$(this).find('.amt').html(function(){
return (amt > 0) ? amt : '';
});
});
$('.current').html(function(){
return (total > 0) ? total : '';
});
$('.total').html(function(){
if($.trim(exp) != '' && !isNaN(exp)){
total = parseFloat(total) + parseFloat(exp);
}
if($.trim(outst) != '' && !isNaN(outst)){
total = parseFloat(total) + parseFloat(outst);
}
if($.trim(paid) != '' && !isNaN(paid)){
total = parseFloat(total) - parseFloat(paid);
}
return total;
});
});
});