In this article i will show you how to find sum of single column of a html Table. We all know that a table contain table row and table column. Each row and column contains a cell. in this article i will use Id of the cell. We all know that id of the cell is different from other cell so we arrange id with numerical no like first cell id is amtlbl_0 and further is amtlbl_1, amtlbl_2. by using each method we can get the all ids. So the main logic is get the id which contain text like "amtlbl". In Jquery we have some technique to get the approximate id by using
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var grandtotal = 0;
$("[id*=amtlbl]").each(function () {
grandtotal = grandtotal + parseFloat($(this).html());
})
$("[id*=totlbl]").html(grandtotal.toString());
});
</script>
</head>
<body>
<table style="width:100%;">
<tr><td>Id</td><td>Amount</td><td>City</td></tr>
<tr><td>1</td><td id="amtlbl_0">200</td><td>Pilani</td></tr>
<tr><td>2</td><td id="amtlbl_1">800</td><td>Jaipur</td></tr>
</table>
<label id="totlbl"/>
</body>
</html>
Code generate the following output:
$("[id*=amtlbl]")Check the complete source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var grandtotal = 0;
$("[id*=amtlbl]").each(function () {
grandtotal = grandtotal + parseFloat($(this).html());
})
$("[id*=totlbl]").html(grandtotal.toString());
});
</script>
</head>
<body>
<table style="width:100%;">
<tr><td>Id</td><td>Amount</td><td>City</td></tr>
<tr><td>1</td><td id="amtlbl_0">200</td><td>Pilani</td></tr>
<tr><td>2</td><td id="amtlbl_1">800</td><td>Jaipur</td></tr>
</table>
<label id="totlbl"/>
</body>
</html>
Code generate the following output:
