Solved

highlight row on focus

Posted on 2002-07-02
7
709 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Title # Comments Views Activity
Add shadow behind div 5 25
Add or delete table rows 10 53
Running a javascript project in WebStorm 2 25
Character counter breaks after adding EmojiOne Area 4 19
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 …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

856 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