I want to minus two value live in the page on the basis of the following jquery, I have sum code it is work properly. Please help.
my code is:
<table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF">
<tr>
<td width="40px">
1
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr id="summation">
<td>
</td>
<td align="right">
Sum :
</td>
<td align="center">
<span id="sum">0</span>
</td>
</tr>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//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>