Hi i have table have 5 comnun
Name Salary Bonus Deduction Total
ahmed 500 500 100 900
calculation of total is
Total=Salary+Bonus-Deduction
and total in red color according to my code
what i need actually if i changed in Salary cell or Bonus cell or Deduction cell affect in total cell
suppose i added row above then edit salary
from 500 to 2000 meaning in this time row will be as bellow
ahmed 2000 500 100 2400
total will be 2400 with green color
how to do by changing cell in table affect in total
if i changed 500 to 2000 total must be 2400 in same time
Name Salary Bonus Deduction Total
ahmed 500 500 100 900
calculation of total is
Total=Salary+Bonus-Deduction
and total in red color according to my code
what i need actually if i changed in Salary cell or Bonus cell or Deduction cell affect in total cell
suppose i added row above then edit salary
from 500 to 2000 meaning in this time row will be as bellow
ahmed 2000 500 100 2400
total will be 2400 with green color
how to do by changing cell in table affect in total
if i changed 500 to 2000 total must be 2400 in same time
JavaScript:
[pre]@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var x = $("#txt1").val();
var y = $("#txt2").val();
var z = $("#txt3").val();
var M = $("#txt4").val();
var L = parseInt(y) + parseInt(z) - parseInt(M);
$("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
$("#tb tr").each(function () {
var total = $(this).find("td:nth-child(5)").html();
if(parseInt(total)>1000)
{
$(this).find("td:nth-child(5)").css("background-color", "green");
}
if (parseInt(total) < 1000) {
$(this).find("td:nth-child(5)").css("background-color", "red");
}
if (parseInt(total) == 1000) {
$(this).find("td:nth-child(5)").css("background-color", "yellow");
}
});
});
$("#tb").on("click", "tr", function () {
$(this).find("td").slice(0, 4).prop("contenteditable", true);
});
});
</script>
<style>
.red{
color:#ff0000;
font-weight:bold;
}
</style>
</head>
<body>
<div>
Name<input type="text" id="txt1" /><br />
Salary<input type="text" id="txt2" /><br />
Bonus<input type="text" id="txt3" /><br />
Deduction<input type="text" id="txt4" /><br />
<input type="button" value="add" id="btn" />
<table>
<thead>
<tr>
<td>
Name
</td>
<td>
Salary
</td>
<td>
Bonus
</td>
<td>
Deduction
</td>
<td>
total
</td>
</tr>
</thead>
<tbody id="tb" class="tb1"></tbody>
</table>
</div>
</body>
</html>[/pre]
