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

PeterKV · Jan 16, 2002

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

http://www.qsl.net/va3pkv/index.html

Boomerang · Jan 17, 2002

Hi Peter,

Try this (works in IE):

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

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

Put the code onmouseover="highlight(this)" onmouseout="normal(this)" in each row:

<tr onmouseover="highlight(this)" onmouseout="normal(this)" >

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

PeterKV · Jan 17, 2002

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

http://www.qsl.net/va3pkv/index.html

Boomerang · Jan 17, 2002

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 "cell.bgColor" looks like it does only the cell but that's only if you put the "onmous... attributes" in the <td> tag.

If you put the "onmous... attributes" 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. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

PeterKV · Jan 18, 2002

"Ummm ... Errr .... No, I didn't try it, sorry!", 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 "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>MouseOver and MouseOut Event Sample</TITLE>
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
<STYLE>
.grid {background-color: #FFFFFF; color: #000000; font-weight: normal; font-size: 12pt; font-family: Courier;}
</STYLE>

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

// rowMouseEnter
function rMe(cell)
{
if( eRowDbug )
{
eRowDbug = false;
alert("rowMouseEnter&quot

;
}
cell.bgColor = '#ff0000';
}

// rowMouseLeave
function rMx(cell)
{
if( xRowDbug )
{
xRowDbug = false;
alert("rowMouseLeave&quot

;
}
cell.bgColor = '#ffffff';
}

// colMouseEnter
function cMe()
{
if( eColDbug )
{
eColDbug = false;
alert("colMouseEnter&quot

;
}
event.srcElement.className="grid";
wLbl = event.srcElement.id;
wCol = wLbl.substr(3,1);
for( wRow = 1; wRow <= 5; wRow ++ )
{
wTgt = eval(event.srcElement."r" + wRow + "c" + wCol);
wTgt.backgroundColor="#0000ff";
}
}

// colMouseLeave
function cMx()
{
if( xColDbug )
{
xColDbug = false;
alert("colMouseLeave&quot

;
}
event.srcElement.className="grid";
wLbl = event.srcElement.id;
wCol = wLbl.substr(3,1);
for( wRow = 1; wRow <= 5; wRow ++ )
{
wTgt = eval(event.srcElement."r" + wRow + "c" + wCol);
wTgt.backgroundColor="#ffffff";
}
}

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

</script>
</HEAD>
<BODY>
<P> <br>Grid Cursor - Sample 1<br> </P>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid"> AAA </td>
<td class="grid"> BBB </td>
<td class="grid"> CCC </td>
<td class="grid"> DDD </td>
<td class="grid"> EEE </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid"> FFF </td>
<td class="grid"> GGG </td>
<td class="grid"> HHH </td>
<td class="grid"> III </td>
<td class="grid"> JJJ </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid"> KKK </td>
<td class="grid"> LLL </td>
<td class="grid"> MMM </td>
<td class="grid"> NNN </td>
<td class="grid"> OOO </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid"> PPP </td>
<td class="grid"> QQQ </td>
<td class="grid"> RRR </td>
<td class="grid"> SSS </td>
<td class="grid"> TTT </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid"> UUU </td>
<td class="grid"> VVV </td>
<td class="grid">

http://WWW </td>

<td class="grid"> XXX </td>
<td class="grid"> YYY </td>
</tr>
</table>
<P> <br>Grid Cursor - Sample 2<br> </P>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid" bgcolor="#ffffff" id="r1c1" onMouseOver="cMe()" onMouseOut="cMx()"> AAA </td>
<td class="grid" bgcolor="#ffffff" id="r1c2" onMouseOver="cMe()" onMouseOut="cMx()"> BBB </td>
<td class="grid" bgcolor="#ffffff" id="r1c3" onMouseOver="cMe()" onMouseOut="cMx()"> CCC </td>
<td class="grid" bgcolor="#ffffff" id="r1c4" onMouseOver="cMe()" onMouseOut="cMx()"> DDD </td>
<td class="grid" bgcolor="#ffffff" id="r1c5" onMouseOver="cMe()" onMouseOut="cMx()"> EEE </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid" bgcolor="#ffffff" id="r2c1" onMouseOver="cMe()" onMouseOut="cMx()"> FFF </td>
<td class="grid" bgcolor="#ffffff" id="r2c2" onMouseOver="cMe()" onMouseOut="cMx()"> GGG </td>
<td class="grid" bgcolor="#ffffff" id="r2c3" onMouseOver="cMe()" onMouseOut="cMx()"> HHH </td>
<td class="grid" bgcolor="#ffffff" id="r1c4" onMouseOver="cMe()" onMouseOut="cMx()"> III </td>
<td class="grid" bgcolor="#ffffff" id="r1c5" onMouseOver="cMe()" onMouseOut="cMx()"> JJJ </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid" bgcolor="#ffffff" id="r3c1" onMouseOver="cMe()" onMouseOut="cMx()"> KKK </td>
<td class="grid" bgcolor="#ffffff" id="r3c2" onMouseOver="cMe()" onMouseOut="cMx()"> LLL </td>
<td class="grid" bgcolor="#ffffff" id="r3c3" onMouseOver="cMe()" onMouseOut="cMx()"> MMM </td>
<td class="grid" bgcolor="#ffffff" id="r3c4" onMouseOver="cMe()" onMouseOut="cMx()"> NNN </td>
<td class="grid" bgcolor="#ffffff" id="r3c5" onMouseOver="cMe()" onMouseOut="cMx()"> OOO </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid" bgcolor="#ffffff" id="r4c1" onMouseOver="cMe()" onMouseOut="cMx()"> PPP </td>
<td class="grid" bgcolor="#ffffff" id="r4c2" onMouseOver="cMe()" onMouseOut="cMx()"> QQQ </td>
<td class="grid" bgcolor="#ffffff" id="r4c3" onMouseOver="cMe()" onMouseOut="cMx()"> RRR </td>
<td class="grid" bgcolor="#ffffff" id="r4c4" onMouseOver="cMe()" onMouseOut="cMx()"> SSS </td>
<td class="grid" bgcolor="#ffffff" id="r4c5" onMouseOver="cMe()" onMouseOut="cMx()"> TTT </td>
</tr>
<tr bgcolor="#ffffff" onMouseOver="rMe(this)" onMouseOut="rMx(this)">
<td class="grid" bgcolor="#ffffff" id="r5c1" onMouseOver="cMe()" onMouseOut="cMx()"> UUU </td>
<td class="grid" bgcolor="#ffffff" id="r5c2" onMouseOver="cMe()" onMouseOut="cMx()"> VVV </td>
<td class="grid" bgcolor="#ffffff" id="r5c3" onMouseOver="cMe()" onMouseOut="cMx()">

http://WWW </td>

<td class="grid" bgcolor="#ffffff" id="r5c4" onMouseOver="cMe()" onMouseOut="cMx()"> XXX </td>
<td class="grid" bgcolor="#ffffff" id="r5c5" onMouseOver="cMe()" onMouseOut="cMx()"> YYY </td>
</tr>
</table>
</BODY>
</HTML> Peter Vince VA3PKV
va3pkv@rac.ca

http://www.qsl.net/va3pkv/index.html

BobbaFet · Jan 20, 2002

if you need a example:

http://ww6.borland.com/codecentral/ccweb.exe/area?from=h|0

I hope this helps,

BobbaFet Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

Heineken is like making love in a cano... it's f*cking close to water !!!

PeterKV · Jan 21, 2002

BobbaFet:

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

http://ww6.borland.com/codecentral/ccweb.exe/

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

http://www.qsl.net/va3pkv/index.html

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!

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

PeterKV

Technical User

Boomerang

Programmer

PeterKV

Technical User

Boomerang

Programmer

PeterKV

Technical User

BobbaFet

Programmer

PeterKV

Technical User

Similar threads

Part and Inventory Search

Sponsor