# Calculating the Sum inside a table using Jquery

Here is one sample code to sum the column values using jquery.

HTML:

<table width="300px" border="1" style="border-collapsecollapsebackground-color#E8DCFF">
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>2</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>3</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr id="summation">
<td  colspan ="2" align="right">
Sum :
</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>

jQuery:

</script>
<script>
//iterate through each textboxes and add keyup
//handler to trigger sum event
\$(".txt").each(function() {
\$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
\$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
\$(this).css("background-color""#FEFFB0");
}
else if (this.value.length != 0){
\$(this).css("background-color""red");
}
});
\$("#sum").html(sum.toFixed(2));
}
</script>