Calculate table
by aaronk85
HTML
<table>
<thead>
<tr>
<th>Quantity</th><th>Price</th><th>Sum</th><th>Country</th>
</tr>
</thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="" /></td><td>2.45</td><td></td><td>FIN</td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="" /></td><td>24.5</td><td></td><td>USA</td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="" /></td><td>37</td><td></td><td>AUS</td>
</tr>
<tr>
<td colspan="2">Total</td><td id="total"></td>
</tr>
</tbody>
</table>
<table id="totalsTable">
<tbody>
<tr>
<th>Country</th><th>Yearly total</th>
</tr>
<tr>
<td>FIN</td><td>245</td>
</tr>
<tr>
<td>USA</td><td>2450</td>
</tr>
<tr>
<td>AUS</td><td>370</td>
</tr>
</tbody>
</table>
CSS
th,td {
border: 1px solid #000;
padding: 5px;
}
JavaScript
function ca() {
var $overall = 0;
$("tr.sum").each(function() {
var $qnt = $(this).find(".qty");
var $price = $(this).find("td").eq(1);
var countryValue = parseFloat($("#totalsTable td:contains('" + countryText + "')").next().text()) + sum;
$("#totalsTable td:contains('" + countryText + "')").next().text(countryValue);
console.log($qnt + " | " + $price);
var q = $qnt.val();
if (isNaN($qnt.val()) || $qnt.val() == '') q = 0;
var sum = parseFloat($price.text()) * parseFloat(q);
$(this).find("td").eq(2).text(sum.toFixed(2));
$overall += sum;
});
$("#total").text($overall);
}
$(function() {
ca();
$('input.qty').bind('change keyup', function() {
ca();
});
});