INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
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

CODE --> javascript

@{  
    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> 

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

@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.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close