change in cell content of salary or bonus or deduction in table cells automatically affect in total
-
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 i can do by button but how to do by changing cell in table affect in total @{ Layout = null; } <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(" " + x + " " + y + " " + z + "" + M + "" + L + ""); $("#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> .red{ color:#ff0000; font-weight:bold; } </head> <body>
Name<input type="text" id="txt1" />
Salary<input type="text" id="txt2" />
Bonus<input type="text" id="txt3" />
Deduction<input t