Sum particular table column value on input checked in Jquery
In this tutorial we all going to learn how can we sum or count particular table column value using jquery when particular row is selected. We have use a table with id id="table1", and column that to be counted/ sumed, set class tag class="vts" .
The table has four columns.
First column of the table contains input checkbox.
Second column contains serial number of Item.
Third column contains name of the item.
Fourth column contains price/numric value that is to be sumed or counted.
Example table is bellow:
<table cellspacing="0"rules="all" border="1" id="table1">
<tr>
<th> </th>
<th style="width:80px">Serial</th>
<th style="width:120px">Items' names</th>
<th style="width:120px">Price</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>Ink</td>
<td class="vts">22</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>Pencil</td>
<td class="vts"> 7</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>NoteBook</td>
<td class="vts">80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>Translation</td>
<td class="vts">25</td>
</tr>
</table>
<br />
<input id = "btnGet" type="button" value="Get Selected" />
I have also used Jquery Plug In and some code that are bellow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
var total = 0;
$("#table1 input[type=checkbox]:checked").each(function () {
var row = $(this).closest("tr")[0];
total += parseInt($('.vts', row).text());
});
alert(total);
});
});
</script>
Above code appears as:
This is an example. Create table as you like and change column class as you wish but don't forget to redefined it in code snipped.
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------