Solved

highlight row on focus

Posted on 2002-07-02
7
707 Views
Last Modified: 2010-08-05
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
Comment
Question by:johnczimm
7 Comments
 

Expert Comment

by:ipis
ID: 7125022
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
 
LVL 1

Author Comment

by:johnczimm
ID: 7125185
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
 
LVL 10

Accepted Solution

by:
zvonko earned 200 total points
ID: 7125228
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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 5

Expert Comment

by:kcm76
ID: 7126013
<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
 
LVL 5

Expert Comment

by:kcm76
ID: 7126025
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
 
LVL 5

Expert Comment

by:kcm76
ID: 7126032
Just replace
if (document.all) by
if (document.all || document.getElementById)

0
 
LVL 1

Author Comment

by:johnczimm
ID: 7127424
I was making this a lot harder then I had to.

Thanks for the help.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question