Last row total not updated when change in salary or bonus or deduction

Last row total not updated when change in salary or bonus or deduction

n my task below i have only one point.
when i changed in cell of bonus or salary or deduction it can changed in total of row but i cannot change in total of columns when i change in cell of salary or bonus or deduction automatically 
to explain
Name salary bonus deduction total

Ahmed 1000 500 500 1000

Ali 2000 400 600 1800

total 3000 900 1100 2800

total=salary + bonus - deduction(for row)
the wrong in when i change in bonus cell for name Ahmed from 500 to 700
total for column bonus not changed it still 900 until i click new row and click button add again value come correctly as following (after change)
Name salary bonus deduction total

Ahmed 1000 700 500 1200

Ali 2000 400 600 1800

total 3000 900 1100 2800

as notice total for column bonus 900 not changed 
and total for all columns 2800 not changed
this is my wrong for my code 
how to solve that


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

  5. <!DOCTYPE html>

  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>Index</title>
  11.     <script src="~/Scripts/jquery-1.10.2.js"></script>
  12.     <script>
  13.         $(function () {
  14.             $("#btn").click(function () {
  15.                 var x = $("#txt1").val();
  16.                 var y = $("#txt2").val();
  17.                 var z = $("#txt3").val();
  18.                 var M = $("#txt4").val();
  19.                 var L = parseInt(y) + parseInt(z) - parseInt(M);

  21.                 $("#tb").append("<tr> <td class='total-ignore'>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
  22.                 var totals = [];
  23.                 $('#tb').find('tr').each(function () {
  24.                     var $row = $(this);

  26.                     $row.children('td').not('.total-ignore').each(function (index) {
  27.                         totals[index] = totals[index] || 0;
  28.                         totals[index] += parseInt($(this).text()) || 0;
  29.                     });
  30.                 })
  31.                 $('#totals td').not('.total-ignore').each(function (index) {
  32.                     $(this).text(totals[index]);
  33.                 });
  34.                 $("#tb tr").each(colorize);
  35.             });
  36.             $("#tb").on("click", "tr", function () {

  38.                 $(this).find("td").slice(0, 4).prop("contenteditable", true);

  40.                  }).on('blur keyup paste input', "tr", colorize)
  41.          
  42.             });

  44.     </script>
  45.     <script>
  46.         function colorize() {
  47.             var numbers = $(this).find("td").slice(1, 4).get().map(function (el) {
  48.                 console.log(arguments)
  49.                 return +$(el).text()
  50.             })
  51.             var total = numbers[0] + numbers[1] - numbers[2]

  53.             var totalEl = $(this).find("td:nth-child(5)").html(total);
  54.             totalEl.removeClass("green yellow red");


  57.             if (total > 1000) {
  58.                 totalEl.addClass("green");
  59.             }
  60.             if (total < 1000) {
  61.                 totalEl.addClass("red");
  62.             }
  63.             if (total == 1000) {
  64.                 totalEl.addClass("yellow");
  65.             }

  67.         }

  69.     </script>
  70.     <style>
  71.         .red {
  72.     background-color: red;
  73.     font-weight: bold;
  74.     color:white;
  75. }

  77. .green {
  78.     background-color: green;
  79. }

  81. .yellow {
  82.     background-color: yellow;
  83. }

  85.     </style>
  86. </head>
  87. <body>
  88.     <div>
  89.         Name
  90.         <input type="text" id="txt1" />
  91.         <br /> Salary
  92.         <input type="text" id="txt2" />
  93.         <br /> Bonus
  94.         <input type="text" id="txt3" />
  95.         <br /> Deduction
  96.         <input type="text" id="txt4" />
  97.         <br />
  98.         <input type="button" value="add" id="btn" />
  99.         <table>
  100.             <thead>
  101.                 <tr>
  102.                     <td>
  103.                         Name
  104.                     </td>
  105.                     <td>
  106.                         Salary

  108.                     </td>
  109.                     <td>
  110.                         Bonus
  111.                     </td>
  112.                     <td>
  113.                         Deduction
  114.                     </td>
  115.                     <td>
  116.                         total
  117.                     </td>
  118.                 </tr>
  119.             </thead>
  120.             <tbody id="tb" class="tb1"></tbody>
  121.             <tfoot id="totals">
  122.                 <tr>
  123.                     <td class="total-ignore">Total</td>
  124.                     <td></td>
  125.                     <td></td>
  126.                     <td></td>
  127.                     <td></td>
  128.                 </tr>
  129.             </tfoot>
  130.         </table>
  131.     </div>
  132. </body>
  133. </html>