Auto Calculate Cell Value In HTML Table With ASP.NET MVC

While developing UI in MVC in medium or large scale applications, we often required to make some auto calculations specially while dealing with sales and statistics. So to quickly develop such auto calculation, I will explain how to calculate all table cell value of 1 row and set the total in last cell using jQuery and JavaScript.

I am using MVC platform. So, first create one MVC application and add one controller and their views. We are calculating values using JavaScript and jQuery so there is no coding part mentioned for controller. I am calculating student marks and full percentage and percentage per subject.

Now, design the MVC view index.cshtml page as per the following screenshot:

@
{
ViewBag.Title = "Index";
} < script src = "~/Scripts/Helper.js" > < /script> @
section featured { < section class = "featured" > @using(Html.BeginForm()) { < div class = "content-wrapper" > < table class = "table table-striped table-bordered table-condensed"
id = "tblStudent"
style = "width:100%;" > < thead > < tr style = "border-bottom: solid;border-top: solid" > < th > Name < /th> < th > Total Marks < /th> < th > Maths < /th> < th > Science < /th> < th > Chemistry < /th> < th > Microbiology < /th> < th > Physics < /th> < th > English < /th> < th > Total < /th> < /tr> < /thead> < tr class = "trRow1" > < td rowspan = "2"
style = "vertical-align:middle;" > < b > ALAX < /b></td > < td rowspan = "2"
style = "vertical-align:middle;" > < input type = "text"
disabled = "disabled"
id = "txtTotalMark"
class = "tdTotalMark"
style = "width:80px; height:50px;"
value = "600" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtMaths"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtScience"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtChemistry"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtMicrobiology"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtPhysics"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMark"
id = "txtEnglish"
style = "width:70px; height:15px;" / > < /td> < td > < input type = "text"
class = "jsMarkTot"
id = "txtTotal"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < /tr> < tr class = "trRow2" > < td > < input type = "text"
class = "jsCal"
id = "txtMathsValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCal"
id = "txtScienceValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCal"
id = "txtChemistryValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCal"
id = "txtMicrobiologyValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCal"
id = "txtPhysicsValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCal"
id = "txtEnglishValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < td > < input type = "text"
class = "jsCalTot"
id = "txtTotalValue"
style = "width:70px; height:15px;"
disabled = "disabled" / > < /td> < /tr> < /table> < /div>
} < /section>
}

Now, you can see that I have added reference of helper.js file on the top of the page. This js file is used just to validate if the value in textbox is valid number or not. You have to reference jquery.min.js to your code if not available.

Now, the following is the jQuery and JavaScript code for cell calculation.

<script type="text/javascript">
$(function () {
$(".jsMark").keyup(calculateResult);
$(".jsCal").keyup(calculateResult);
$(".jsMark").change(calculateResult);
$(".jsCal").change(calculateResult);
$(".jsMark,.jsCal").keydown(Helper.isNumberKey);
});
function calculateResult() {
var ta;
var tr = $(this).closest('tr');
$(tr).find('td').each(function () {
$(this).find('.tdTotalMark').each(function () {
ta = $(this).val();
});
});
var cost = this.value;
var tot = (parseFloat(cost) / parseFloat(ta)) * 100;
if (cost != "") {
$('#' + this.id + 'Value').val(tot.toFixed(2));
}
$('#tblStudent tr.trRow1').each(function () {
var sum = 0;
$(this).find('td').each(function () {
$(this).find('.jsMark').each(function () {
var combat = $(this).val();
if (!isNaN(combat) && combat.length !== 0) {
sum = parseFloat(sum) + parseFloat(combat);
}
});
});
$(this).find('td:last').find('input.jsMarkTot').val(sum.toFixed(2));
});
$('#tblStudent tr.trRow2').each(function () {
var sum2 = 0;
$(this).find('td').each(function () {
$(this).find('.jsCal').each(function () {
var combat2 = $(this).val();
if (!isNaN(combat2) && combat2.length !== 0) {
sum2 = parseFloat(sum2) + parseFloat(combat2);
}
});
});
$(this).find('td:last').find('input.jsCalTot').val(sum2.toFixed(2));
});
}
</script>

Finally, run the application and enter random values in text boxes, you can see that the total of cell values and calculation automatically set on last cell simultaneously when you change any value. The above code fires on change and keyup event of textboxes.

The output of index.cshtml page looks like the following:

output

I created this document just for example purpose, but you can use this code as per your requirements.

10 Comments

Join the conversation! Your thoughts help the community grow.

Narayan Bhosale7y ago
Is this code can use for multiple record
Gowtham K11y ago
Good One, Thanks for sharing
Nilesh Jadav11y ago
Good one sir!
Dinesh Beniwal11y ago
Welcome to C# Corner Ethan.
Humayun Kabir Mamun11y ago
Nice...
Mukesh Kumar11y ago
Good Job
Harshad Pansuriya11y ago
Nice one
Rohit Tarpara11y ago
Excellent and minimum code lines for calculation result using jQuery, Very Nice...
Sibeesh Venu11y ago
Nice Share
- Ethan Millar11y ago
  Thanks for appreciation Sibeesh.