Change In Cell Content Of Salary Or Bonus Or Deduction In Table Cells

ahm1985 · Jul 30, 2016

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

JavaScript:

[pre]@{  
    Layout = null;  
}  
  
<!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>[/pre]

southbeach · Aug 4, 2016

@ahm1985, not sure exactly what your question is but I am guessing (a) how to add total or do math or (b) change color property as field values are changed.

If simply changing field color on change:

Code:

onchange="$(this).css('color','green')"

of course, if you need to change the color to different color based on UP/DOWN or any combination of criteria, you may need to use a method/function instead of using the inline approach

Code:

onfocus="initValue=$(this).val();" onchange="setColor($(this));"

function setColor(strOBJ) {
// set your logic here ... remember that initValue now has the value prior to change
}

it is important to define "initValue" in your page so that you do not run into errors - Some where after the </body> tag:

Code:

<script>var initValue=0.00;</script>

Now, for the total, I like to assign a class or property to the fields that are common so that I can loop through the document and group those fields as needed. Using jQuery handy .each() you can do wonderful things.

Hope this points you in the right direction!

--
SouthBeach

http://www.fp2php.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change In Cell Content Of Salary Or Bonus Or Deduction In Table Cells

ahm1985

Programmer

southbeach

Programmer

Similar threads

Part and Inventory Search

Sponsor