Solved

highlight row on focus

Posted on 2002-07-02
7
712 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

738 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