变化在总

您好自动影响我有表具有5列变化在总

Name Salary Bonus Deduction Total 
Ahmed 500  500 100  900

计算总的是根据我的代码 Total=Salary+Bonus-Deduction 和在红色总我实际上需要什么，如果我改变工资单元或奖金单元格或扣除单元格影响总单元格假设我添加了上面的行然后编辑工资从500到2000意味着在此时间行将如下 Ahmed 2000 500 100 2400 总数将是240 0与绿色如何通过改变总

<!DOCTYPE html> 

    <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("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>"); 
        $("#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> 
     <style> 
      .red{ 
     color:#ff0000; 
     font-weight:bold; 
     } 
     </style> 


    </head> 
    <body> 
     <div> 
      Name<input type="text" id="txt1" /><br /> 
      Salary<input type="text" id="txt2" /><br /> 
      Bonus<input type="text" id="txt3" /><br /> 
      Deduction<input type="text" id="txt4" /><br /> 
      <input type="button" value="add" id="btn" /> 


      <table> 
       <thead> 
        <tr> 
         <td> 

           Name 


         </td> 
         <td> 

           Salary 


         </td> 
         <td> 

           Bonus 


         </td> 
         <td> 

           Deduction 


         </td> 
         <td> 
          total 
         </td> 
        </tr> 
       </thead> 
       <tbody id="tb" class="tb1"></tbody> 
      </table> 
     </div> 
    </body> 
    </html>

来源

2016-07-30 user3223372

因为你添加属性CONTENTEDITABLE当你点击一个表行到每一表格单元格中的表格单元格的影响，以保持更新，需要使用总场做：

焦点事件，以节省电池
keydown事件的当前值，以避免返回键，并在未来只接受数字
模糊事件来测试是否单元格内容改变如果是重新计算总：

$(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); 
 

 
    // reset fields 
 
    $('[id^="txt"]').val(''); 
 
    
 
    $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>"); 
 
    $("#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 (e) { 
 
    $(this).find("td").slice(0, 4).prop("contenteditable", true); 
 
    }); 
 

 
    $(document).on('focus', "#tb tr td", function (e) { 
 
    if ($(this).index() > 0) { 
 
     $(this).data('orig', this.textContent); 
 
    } 
 
    }); 
 

 
    $(document).on('keydown', "#tb tr td", function (e) { 
 
    if ($(this).index() > 0) { 
 
     if (e.keyCode === 10 || e.keyCode === 13) { 
 
     e.preventDefault(); 
 
     } 
 
    } 
 
    }); 
 

 
    $(document).on('blur', "#tb tr td", function (e) { 
 
    if (($(this).index() > 0) && ($(this).data('orig') != this.textContent)) { 
 
     var cells = $(this).parent().find('td'); 
 
     var Salary = +cells.eq('1').text(); 
 
     var Bonus = +cells.eq('2').text(); 
 
     var Deduction = +cells.eq('3').text(); 
 
     cells.eq('4').text(Salary + Bonus - Deduction).css('background-color', 'green'); 
 
    } 
 
    }); 
 
});

.red { 
 
    color: #ff0000; 
 
    font-weight: bold; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div> 
 
    Name<input type="text" id="txt1"/><br/> 
 
    Salary<input type="text" id="txt2"/><br/> 
 
    Bonus<input type="text" id="txt3"/><br/> 
 
    Deduction<input type="text" id="txt4"/><br/> 
 
    <input type="button" value="add" id="btn"/> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <td> 
 
       Name 
 
      </td> 
 
      <td> 
 
       Salary 
 
      </td> 
 
      <td> 
 
       Bonus 
 
      </td> 
 
      <td> 
 
       Deduction 
 
      </td> 
 
      <td> 
 
       total 
 
      </td> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="tb" class="tb1"></tbody> 
 
    </table> 
 
</div>

来源

2016-07-30 16:49:56 gaetanoM

非常感谢它解决 – user3223372

回答

相关问题