Post
Ask Question
ahmed salah

ahmed salah

  • NA
  • 530
  • 148.9k

Change Cell Content Salary Or Bonus change total same time

Jul 30 2016 9:38 AM
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
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  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);  
  20.                 
  21.                 $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");  
  22.                 $("#tb tr").each(function () {  
  23.                     var total = $(this).find("td:nth-child(5)").html();  
  24.   
  25.                     if(parseInt(total)>1000)  
  26.                     {  
  27.                         $(this).find("td:nth-child(5)").css("background-color", "green");  
  28.                     }  
  29.                     if (parseInt(total) < 1000) {  
  30.                         $(this).find("td:nth-child(5)").css("background-color", "red");  
  31.                     }  
  32.                     if (parseInt(total) == 1000) {  
  33.                         $(this).find("td:nth-child(5)").css("background-color", "yellow");  
  34.                     }  
  35.                    
  36.                 });  
  37.                   
  38.                 
  39.             });  
  40.              
  41.           
  42.             $("#tb").on("click", "tr", function () {  
  43.                  
  44.                 $(this).find("td").slice(0, 4).prop("contenteditable", true);  
  45.   
  46.             });  
  47.            
  48.              
  49.               
  50.         });  
  51.     </script>  
  52.     <style>  
  53.          .red{  
  54.     color:#ff0000;  
  55.     font-weight:bold;  
  56.     }  
  57.     </style>  
  58.      
  59.       
  60. </head>  
  61. <body>  
  62.     <div>  
  63.         Name<input type="text" id="txt1" /><br />  
  64.         Salary<input type="text" id="txt2" /><br />  
  65.         Bonus<input type="text" id="txt3" /><br />  
  66.         Deduction<input type="text" id="txt4" /><br />  
  67.         <input type="button" value="add" id="btn" />  
  68.          
  69.   
  70.         <table>  
  71.             <thead>  
  72.                 <tr>  
  73.                     <td>  
  74.                           
  75.                             Name  
  76.                           
  77.                          
  78.                     </td>  
  79.                     <td>  
  80.                           
  81.                             Salary  
  82.                           
  83.                           
  84.                     </td>  
  85.                     <td>  
  86.                           
  87.                             Bonus  
  88.                           
  89.                           
  90.                     </td>  
  91.                     <td>  
  92.                           
  93.                             Deduction  
  94.                           
  95.                           
  96.                     </td>  
  97.                     <td>  
  98.                         total  
  99.                     </td>  
  100.                 </tr>  
  101.             </thead>  
  102.             <tbody id="tb" class="tb1"></tbody>  
  103.         </table>  
  104.     </div>  
  105. </body>  
  106. </html>  
 

Answers (1)