Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 760
  • Last Modified:

highlight row on focus

I have a table that is 6 columns wide and has several rows.  In columns 1, 2, and 5 are text boxes for the user to enter data.  Every other row, even numbered rows, is shaded with a background color of “#D2D8F9”.  What I need to do is:  when a user puts focus to one of the text boxes, either by clicking or tabbing, I need to turn the background color of that text box to “Yellow”, and highlight the row, turn the background color of the row, to “#FFCC66”.  When the user moves to a new row, the background color of the previous row needs to be reset to its original color, either “White” for odd numbered rows, or “#D2D8F9” for even numbered rows.  The main problem I am having is the fact that the table rows are using alternating colors.
Thanks in advance for the help.

JOHN
0
johnczimm
Asked:
johnczimm
1 Solution
 
ipisCommented:
Hi, there is simple solution for IE:
1. you set the background of the rows through style="background-color: ..." insted of bgcolor="..."
2. <tr style="background-color: ..."  onfocus = "this.runtimeStyle.backgroundColor = '#FFCC66'" onblur="this.runtimeStyle.backgroundColor=''">

The point is to use runtimeStyle which overwrites the style only when is set, if unset the style returns to the default.

Ivan
0
 
johnczimmAuthor Commented:
Here is the scripts I have so far.  It is very close to working, but it retains the first row highlighted.

<script language="javascript" type="text/javascript">    
<!--
var highlightcolor="yellow"
var ns6=document.getElementById&&!document.all
var eventobj
var prevColor=''
var prevObj=''
var obj
var rowColor="#FFCC66"
               
     function highlightCell(e){
          var obj=event.srcElement.parentElement.parentElement.tagName
          if(obj=="TD"||obj=="TR"||obj=="TABLE"){
               source=event.srcElement
               while(source.tagName!="TR")
               source=source.parentElement
               prevColor=source.style.backgroundColor
               changeto();
          }
          eventobj=ns6? e.target : event.srcElement
          eventobj.style.backgroundColor="yellow";
     }
               
     function resetHighlight(e) {
          var obj=event.srcElement.parentElement.parentElement.tagName
          if(obj=="TD"||obj=="TR"||obj=="TABLE"){
               resetto();
          }
          eventobj=ns6? e.target : event.srcElement
          eventobj.style.backgroundColor='';
     }              

     function changeto(){
          source=event.srcElement
          if (source.tagName=="TR"||source.tagName=="TABLE")
          return
          while(source.tagName!="TR")
          source=source.parentElement
          prevColor=source.style.backgroundColor
          if (source.style.backgroundColor!=rowColor&&source.id!="ignore"){                        
               source.style.backgroundColor=rowColor;
          }
     }

     function resetto(){
          source=event.srcElement
          if (source.tagName=="TR"||source.tagName=="TABLE")
          return
          while(source.tagName!="TR")
          source=source.parentElement
          if (source.style.backgroundColor!=prevColor&&source.id!="ignore"){
               source.style.backgroundColor=prevColor;
          }
     }
-->
</script>


on textbox focus I'm calling highlightCell(event)
on textbox blur I'm calling resetHighlight(event)

I would like to clean this up a bit, but I'm not sure how to get it there.  


Thanks again.
0
 
zvonkoCommented:
Try this row definition:

<tr style="background-color:'#D2D8F9'"  onactivate="this.runtimeStyle.cssText='background-color:#FFCC66'" onbeforedeactivate="this.runtimeStyle.cssText=''" >
<TD><input type=text name=pos><br></TD></tr>


Good luck,
zvonko

0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Chandramouli kArchitectCommented:
<html>
<head>
<script>
function resetColor(txt, color)
{
     if(document.all)          
     {
          document.all.item('r' + txt.name).bgColor = document.bgColor;    
          document.all(txt.name).style.backgroundColor = "white";    
     }
}
function setColor(txt, color) {
     //alert(document.all(txt.name).style.bgColor);
     if (document.all)          
     {
          document.all.item('r' + txt.name).bgColor = color;                        
          document.all(txt.name).style.backgroundColor = "yellow";    
     }
}
</script>
</head>
<body>
<form name="form1">
  <table border="0" cellspacing="0">
    <tr id = "r1">
      <td><input type="text" name="1" onblur="resetColor(this,'blue')"  onfocus = "setColor(this, 'red');"></td>
      <td width="14%">test1</td>
      <td width="13%">test2</td>
      </tr>
    <tr id = "r2">
      <td><input type="text" name="2" onblur="resetColor(this,'blue')"  onfocus = "setColor(this, 'red');"></td>
      <td width="14%">test3</td>
      <td width="13%">test4</td>
    </tr>
  </table>
</form>
</body>
</html>

KCM
0
 
Chandramouli kArchitectCommented:
The above one is just a sample, the same way u can have many number of textboxes and cells. all u have to do is just call the setColor and resetColor in onfocus and onblur resp.

btw, i have given tr color as white and red; this u can change to any color.

ALL THE BEST
KCM
0
 
Chandramouli kArchitectCommented:
Just replace
if (document.all) by
if (document.all || document.getElementById)

0
 
johnczimmAuthor Commented:
I was making this a lot harder then I had to.

Thanks for the help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now