In this article i have explain how to perform the calucation in the table which input field when we are enter any number into the input field calucation will be perform.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Performing Calculations in a Table</title>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.cpm, .impression, .ctr,.vtr,.uniqueReachPercent,.uniqueReach,.KPIImpact,.MinImpact').prop('readonly', true);
var $tblrows = $("#tblMediaOptimizer tbody tr");
$tblrows.each(function (index) {
var $tblrow = $(this);
$tblrow.find('.budget').on('change keyup paste', function () {
var budget = $tblrow.find("[name=budget]").val();
var cpm = $tblrow.find("[name=cpm]").val();
var impression = parseInt(budget, 10) * parseFloat(cpm);
if (!isNaN(impression)) {
$tblrow.find('.impression').val(impression.toFixed(0));
var grandTotal = 0;
$(".impression").each(function () {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});
</script>
</head>
<body>
<h2>Performing Calculations in a Table</h2>
<p>Enter a number in the Budget Column
and hit tab
</p>
<table id="tblMediaOptimizer">
<thead>
<tr>
<td>Ad Name</td>
<td>Ad Type</td>
<td>Budget</td>
<td>CPM</td>
<td>Impression</td>
<td>CTR</td>
<td>VTR</td>
<td>Unique Reach %</td>
<td>Unique Reach</td>
<td>KPI Impact</td>
<td>Min Impact</td>
</tr>
</thead>
<tbody>
<tr>
<td>ad 1</td>
<td> typ 1</td>
<td><input type="text" class="budget" value="100" name="budget"/></td>
<td><input type="text" class="cpm" value="2" name="cpm"/></td>
<td><input type="text" class="impression" value="1000" name="impression"/></td>
<td><input type="text" class="ctr" value="220" name="ctr"/></td>
<td><input type="text" class="vtr" value="220" name="vtr"/></td>
<td><input type="text" class="uniqueReachPercent" value="220" name="uniqueReachPercent"/></td>
<td><input type="text" class="uniqueReach" value="220" name="uniqueReach"/></td>
<td><input type="text" class="KPIImpact" value="220" name="KPIImpact"/></td>
<td><input type="text" class="MinImpact" value="220" name="MinImpact"/></td>
</tr>
<tr>
<td>ad 1</td>
<td> typ 1</td>
<td><input type="text" class="budget" value="100" name="budget"/></td>
<td><input type="text" class="cpm" value="2" name="cpm"/></td>
<td><input type="text" class="impression" value="1000" name="impression"/></td>
<td><input type="text" class="ctr" value="220" name="ctr"/></td>
<td><input type="text" class="vtr" value="220" name="vtr"/></td>
<td><input type="text" class="uniqueReachPercent" value="220" name="uniqueReachPercent"/></td>
<td><input type="text" class="uniqueReach" value="220" name="uniqueReach"/></td>
<td><input type="text" class="KPIImpact" value="220" name="KPIImpact"/></td>
<td><input type="text" class="MinImpact" value="220" name="MinImpact"/></td>
</tr>
<tr>
<td>ad 1</td>
<td> typ 1</td>
<td><input type="text" class="budget" value="100" name="budget"/></td>
<td><input type="text" class="cpm" value="2" name="cpm"/></td>
<td><input type="text" class="impression" value="1000" name="impression"/></td>
<td><input type="text" class="ctr" value="220" name="ctr"/></td>
<td><input type="text" class="vtr" value="220" name="vtr"/></td>
<td><input type="text" class="uniqueReachPercent" value="220" name="uniqueReachPercent"/></td>
<td><input type="text" class="uniqueReach" value="220" name="uniqueReach"/></td>
<td><input type="text" class="KPIImpact" value="220" name="KPIImpact"/></td>
<td><input type="text" class="MinImpact" value="220" name="MinImpact"/></td>
</tr>
<tr>
<td>ad 1</td>
<td> typ 1</td>
<td><input type="text" class="budget" value="100" name="budget"/></td>
<td><input type="text" class="cpm" value="2" name="cpm"/></td>
<td><input type="text" class="impression" value="1000" name="impression"/></td>
<td><input type="text" class="ctr" value="220" name="ctr"/></td>
<td><input type="text" class="vtr" value="220" name="vtr"/></td>
<td><input type="text" class="uniqueReachPercent" value="220" name="uniqueReachPercent"/></td>
<td><input type="text" class="uniqueReach" value="220" name="uniqueReach"/></td>
<td><input type="text" class="KPIImpact" value="220" name="KPIImpact"/></td>
<td><input type="text" class="MinImpact" value="220" name="MinImpact"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table>
</body>
</html>
Ouput :
