change in cell content of salary or bonus or deduction in table cells automatically affect in total

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

  2. @{
  3.     Layout = null;
  4. }

  6. <!DOCTYPE html>

  8. <html>
  9. <head>
  10.     <meta name="viewport" content="width=device-width" />
  11.     <title>Index</title>
  12.     <script src="~/Scripts/jquery-1.10.2.js"></script>
  13.     <script>
  14.         $(function () {
  15.             $("#btn").click(function () {
  16.                 var x = $("#txt1").val();
  17.                 var y = $("#txt2").val();
  18.                 var z = $("#txt3").val();
  19.                 var M = $("#txt4").val();
  20.                 var L = parseInt(y) + parseInt(z) - parseInt(M);
  21.               
  22.                 $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
  23.                 $("#tb tr").each(function () {
  24.                     var total = $(this).find("td:nth-child(5)").html();

  26.                     if(parseInt(total)>1000)
  27.                     {
  28.                         $(this).find("td:nth-child(5)").css("background-color", "green");
  29.                     }
  30.                     if (parseInt(total) < 1000) {
  31.                         $(this).find("td:nth-child(5)").css("background-color", "red");
  32.                     }
  33.                     if (parseInt(total) == 1000) {
  34.                         $(this).find("td:nth-child(5)").css("background-color", "yellow");
  35.                     }
  36.                  
  37.                 });
  38.                 
  39.               
  40.             });
  41.            
  42.         
  43.             $("#tb").on("click", "tr", function () {
  44.                
  45.                 $(this).find("td").slice(0, 4).prop("contenteditable", true);

  47.             });
  48.          
  49.            
  50.             
  51.         });
  52.     </script>
  53.     <style>
  54.          .red{
  55.     color:#ff0000;
  56.     font-weight:bold;
  57.     }
  58.     </style>
  59.    
  60.     
  61. </head>
  62. <body>
  63.     <div>
  64.         Name<input type="text" id="txt1" /><br />
  65.         Salary<input type="text" id="txt2" /><br />
  66.         Bonus<input type="text" id="txt3" /><br />
  67.         Deduction<input type="text" id="txt4" /><br />
  68.         <input type="button" value="add" id="btn" />
  69.        

  71.         <table>
  72.             <thead>
  73.                 <tr>
  74.                     <td>
  75.                         
  76.                             Name
  77.                         
  78.                        
  79.                     </td>
  80.                     <td>
  81.                         
  82.                             Salary
  83.                         
  84.                         
  85.                     </td>
  86.                     <td>
  87.                         
  88.                             Bonus
  89.                         
  90.                         
  91.                     </td>
  92.                     <td>
  93.                         
  94.                             Deduction
  95.                         
  96.                         
  97.                     </td>
  98.                     <td>
  99.                         total
  100.                     </td>
  101.                 </tr>
  102.             </thead>
  103.             <tbody id="tb" class="tb1"></tbody>
  104.         </table>
  105.     </div>
  106. </body>
  107. </html>