Solved

highlight row on focus

Posted on 2002-07-02
7
698 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

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 …
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now