Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Is it possible to dynamically change bgcolor of whole table row/col ?

Status
Not open for further replies.
PeterKV

PeterKV

Technical User
Joined
Apr 3, 2000
Messages
18
Location
CA
Does any one know if it is possible to change the background color of all the cells in a table row (and or column) using, I suppose, CSS and onMouseover?

What I'm after is a way to have the whole row (or column) that contains the cell under the mouse pointer change color as the mouse is moved over a table - a honking big highlight bar - such that when the mouse starts to hover over a cell in a row, the whole row changes background colour; then when the mouse is moved off of that row, the row's cells background colour revert to their previous value(s).

Anybody got any ideas or suggestions? Peter Vince VA3PKV
va3pkv@rac.ca
 
Sort by date Sort by votes
Hi Peter,

Try this (works in IE):

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function highlight(cell)
{
cell.bgColor = '#ffff00';
}

function normal(cell)
{
cell.bgColor = '';
}
</script>

Put the code onmouseover=&quot;highlight(this)&quot; onmouseout=&quot;normal(this)&quot; in each row:

<tr onmouseover=&quot;highlight(this)&quot; onmouseout=&quot;normal(this)&quot; >

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Erik

Thanks for the reply.

I'm not sure, but I think the technique you illustrate is limited to IE (don't know my DOM's too well) and only does the cell under the cursor.

Mainly, I'm looking for something that changes the background colour of each and every cell in the row of cells that contain the cell the mouse is hovering over.

Secondarily, I'm looking for ideas on how to do this in both IE and Netscape.

Again, thanks for the reply. Peter Vince VA3PKV
va3pkv@rac.ca
 
Upvote 0 Downvote
Hi Peter,

YES you are right about the fact that it don't work in Netscape.

NO you are NOT right that it only does the cell under the cursor. Maybe &quot;cell.bgColor&quot; looks like it does only the cell but that's only if you put the &quot;onmous... attributes&quot; in the <td> tag.

If you put the &quot;onmous... attributes&quot; in the <tr> tag then it effects the whole row!
Did you try it Peter?

Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
&quot;Ummm ... Errr .... No, I didn't try it, sorry!&quot;, he said sheepishly.

Thanks for the nudge.

So I did try the following. Be warned - its largeish for these forums, but the bottom line is: it didn't work - no events fired. What am I doing wrong?

===========================================================
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<HTML>
<HEAD>
<TITLE>MouseOver and MouseOut Event Sample</TITLE>
<META NAME=&quot;MS.LOCALE&quot; CONTENT=&quot;EN-US&quot;>
<META NAME=&quot;ROBOTS&quot; CONTENT=&quot;noindex&quot;>
<STYLE>
.grid {background-color: #FFFFFF; color: #000000; font-weight: normal; font-size: 12pt; font-family: Courier;}
</STYLE>

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
var eRowDbug = true, xRowDbug = true;
var eColDbug = true, xColDbug = true;

// rowMouseEnter
function rMe(cell)
{
if( eRowDbug )
{
eRowDbug = false;
alert(&quot;rowMouseEnter&quot;);
}
cell.bgColor = '#ff0000';
}

// rowMouseLeave
function rMx(cell)
{
if( xRowDbug )
{
xRowDbug = false;
alert(&quot;rowMouseLeave&quot;);
}
cell.bgColor = '#ffffff';
}

// colMouseEnter
function cMe()
{
if( eColDbug )
{
eColDbug = false;
alert(&quot;colMouseEnter&quot;);
}
event.srcElement.className=&quot;grid&quot;;
wLbl = event.srcElement.id;
wCol = wLbl.substr(3,1);
for( wRow = 1; wRow <= 5; wRow ++ )
{
wTgt = eval(event.srcElement.&quot;r&quot; + wRow + &quot;c&quot; + wCol);
wTgt.backgroundColor=&quot;#0000ff&quot;;
}
}

// colMouseLeave
function cMx()
{
if( xColDbug )
{
xColDbug = false;
alert(&quot;colMouseLeave&quot;);
}
event.srcElement.className=&quot;grid&quot;;
wLbl = event.srcElement.id;
wCol = wLbl.substr(3,1);
for( wRow = 1; wRow <= 5; wRow ++ )
{
wTgt = eval(event.srcElement.&quot;r&quot; + wRow + &quot;c&quot; + wCol);
wTgt.backgroundColor=&quot;#ffffff&quot;;
}
}

// Put the code onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot; in each row:

</script>
</HEAD>
<BODY>
<P> <br>Grid Cursor - Sample 1<br> </P>
<table width=&quot;100%&quot; border=0 cellpadding=0 cellspacing=0>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot;> AAA </td>
<td class=&quot;grid&quot;> BBB </td>
<td class=&quot;grid&quot;> CCC </td>
<td class=&quot;grid&quot;> DDD </td>
<td class=&quot;grid&quot;> EEE </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot;> FFF </td>
<td class=&quot;grid&quot;> GGG </td>
<td class=&quot;grid&quot;> HHH </td>
<td class=&quot;grid&quot;> III </td>
<td class=&quot;grid&quot;> JJJ </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot;> KKK </td>
<td class=&quot;grid&quot;> LLL </td>
<td class=&quot;grid&quot;> MMM </td>
<td class=&quot;grid&quot;> NNN </td>
<td class=&quot;grid&quot;> OOO </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot;> PPP </td>
<td class=&quot;grid&quot;> QQQ </td>
<td class=&quot;grid&quot;> RRR </td>
<td class=&quot;grid&quot;> SSS </td>
<td class=&quot;grid&quot;> TTT </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot;> UUU </td>
<td class=&quot;grid&quot;> VVV </td>
<td class=&quot;grid&quot;> <td class=&quot;grid&quot;> XXX </td>
<td class=&quot;grid&quot;> YYY </td>
</tr>
</table>
<P> <br>Grid Cursor - Sample 2<br> </P>
<table width=&quot;100%&quot; border=0 cellpadding=0 cellspacing=0>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c1&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> AAA </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c2&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> BBB </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c3&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> CCC </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c4&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> DDD </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c5&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> EEE </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r2c1&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> FFF </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r2c2&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> GGG </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r2c3&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> HHH </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c4&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> III </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r1c5&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> JJJ </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r3c1&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> KKK </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r3c2&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> LLL </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r3c3&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> MMM </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r3c4&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> NNN </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r3c5&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> OOO </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r4c1&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> PPP </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r4c2&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> QQQ </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r4c3&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> RRR </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r4c4&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> SSS </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r4c5&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> TTT </td>
</tr>
<tr bgcolor=&quot;#ffffff&quot; onMouseOver=&quot;rMe(this)&quot; onMouseOut=&quot;rMx(this)&quot;>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r5c1&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> UUU </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r5c2&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> VVV </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r5c3&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> <td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r5c4&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> XXX </td>
<td class=&quot;grid&quot; bgcolor=&quot;#ffffff&quot; id=&quot;r5c5&quot; onMouseOver=&quot;cMe()&quot; onMouseOut=&quot;cMx()&quot;> YYY </td>
</tr>
</table>
</BODY>
</HTML> Peter Vince VA3PKV
va3pkv@rac.ca
 
Upvote 0 Downvote
BobbaFet:

The URL you gave for the specific page on Borland is, apparently, incomplete - it 404's, but going to just:


revealed an example of just what you were refering to - I think.


THANK YOU VERY MUCH!!!

Its almost exactly the effect I'm talking about.

And according to the header on the JS file referenced in the HTML of the page, the code in 'crosshair.js' is Public Domain - only thing better would be GPL :)

Peter Vince VA3PKV
va3pkv@rac.ca
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
1K
bdwilcox
bdwilcox
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top