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

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

  4. <!DOCTYPE html>

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

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

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

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