In this article, we learn about how to calculate sum of column in jquery, or you can also say how to calculate the value when giving input to the column.
In this article we will jquery version 3.X and bootstrap version 4 to give some feel to our form.
You will learn about each function() , parse column data in this article.
Below is the basic html code which includes cdn in their head
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Codehunger</h1>
</div>
<div class="container">
<table id="subject-table" class="table">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>Math :</span></td>
<td><input type="text" class='txtCal' /></td>
</tr>
<tr>
<td><span>Science :</span></td>
<td><input type="text" class='txtCal' /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
</div>
</body>
</html>
Now it’s time to the main part of this article where we are going to calculate the sum of all the textboxes and sets its final amount at table footer. First, we make a loop over the table row using .each() to get the value of each textbox. Then we check whether the entered values are numbers only using isNumeric().
If the entered value is numeric then only will add it to our variable (calculated_total_sum). Now we set the calculated_total_sum value to the Table footer which gives us the total sum of all the textboxes.
$(function () {
$("#subject-table").on('input', '.txtCal', function () {
var calculated_total_sum = 0;
$("#subject-table .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
});
//*Now I have added the entire code in the single page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Codehunger Private Limited</h1>
<p>Website And App Development Company</p>
</div>
<div class="container">
<table id="subject table" class="table">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>Math :</span></td>
<td><input type="text" class='txtCal' /></td>
</tr>
<tr>
<td><span>Science :</span></td>
<td><input type="text" class='txtCal' /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
</div>
<script>
$("#subject-table .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
});
</script>
</body>
</html>
One Comment