Ho to highlight a row of a table onMouseOver?

**tammara** · May 31, 2002, 16:15

Hi All,

Any1 out there is ready to sho me how to Make a row of a table highlight when mouse over?

If I have the following table for example what code should I add?

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
</table>

**teknikewl** · May 31, 2002, 16:28

Hey tammara. You are going to want to use CSS for this I do believe:

This goes in the <head> section of your document:

Code:

<STYLE TYPE="text/css"> 
<!-- 
A:link { background-color: transparent;}
A:visited { background-color: transparent;}
A:hover { background-color: #ff6633;}
A:active { background-color: transparent; }
--> 
</STYLE>

Or something to that affect. Im not to up on CSS so you may be able to make the entire background change but the example above just changes the text background. Not sure how much that helps

**tammara** · May 31, 2002, 16:35

thanx Bryan,

But this didn't help me much!

What if the row dosn't include a link?

and the above code would affect the entire links on the page! wouldn't it?!

I onlly want to affect the row of a table! any idea of how doing this?

thanx

**teknikewl** · May 31, 2002, 17:21

This is true! Im not sure it can be done with out creating a link.....BUT I have been known to be wrong!!!

I will see if I can find it.

If they were links you could always just assign a class to the A:LINK and such. I think it would be like A:link.cell or A.cell:link then <a class="cell" href="blabblahblah>....</a> but that still would only affect the text if it were a link. Sorry if that doesn't help much either!

**gekofish** · May 31, 2002, 17:28

Try this, it will heighlight the first cell

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td name="cell1" width="20%" id="td1" onMouseOver="document.all.td1.style.background = '#ff0000'" onMouseOut="document.all.td1.style.background = '#FFFFFF'">ccc </td>
<td width="80%">ccc </td>
</tr>
<tr>
<td width="20%">cc </td>
<td width="80%">cc </td>
</tr>
<tr>
<td width="20%">cc </td>
<td width="80%">cc </td>
</tr>
</table>

**teknikewl** · May 31, 2002, 17:39

Good work gekofish! I will store that one in my memory too!

**tammara** · May 31, 2002, 17:47

Thanx gekofish
You are great

your code will highlight only the cell not the entire row!

Is it possible to higlight the whole row?

If not I'll use the above code

love u :

**Paul S** · May 31, 2002, 17:49

Originally posted by gekofish
Try this, it will heighlight the first cell

Does that work with NN 4.x, Opera and other browsers or just IE?

Paul

**Andrew-J2000** · May 31, 2002, 18:15

no it will not but this will. And i put a little error trapping in as well

PHP Code:




<script type="text/javascript">



  function alter(what,col)

  {

    try

    {

      (what != null)? what.style.background = col : null;

    }

    catch(errorObject)

    {

      alert('what is not an obj\t error = ' + errorObject.description);

    }

  }



</script>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">

  <tr> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">1</td> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">4</td> 

  </tr> 

  <tr> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">2</td> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">5</td> 

  </tr> 

  <tr> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">3</td> 

    <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">6</td> 

  </tr> 

</table>

**tammara** · May 31, 2002, 19:05

hi andrew

thnx

Your code did prety the same as the one previuosly sugested! It only higlights the first cell!

it seems I should give up the whole row

thanx guys

**Andrew-J2000** · May 31, 2002, 19:22

it's only a matter of moving the onmouse over to the tr tag

PHP Code:


<script type="text/javascript">



  function alter(what,col)

  {

    try

    {

      (what != null)? what.style.background = col : null;

    }

    catch(errorObject)

    {

      alert('what is not an obj\t error = ' + errorObject.description);

    }

  }



</script>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">

  <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 

    <td width="20%">1</td> 

    <td width="20%">4</td> 

  </tr> 

  <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 

    <td width="20%">2</td> 

    <td width="20%">5</td> 

  </tr> 

  <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 

    <td width="20%">3</td> 

    <td width="20%">6</td> 

  </tr> 

</table>

**tammara** · May 31, 2002, 19:27

thanx andew! you have just closed a very important chapter in HISTORY

no kiss avatars here? nevermind take this :-*

**Paul S** · Jun 3, 2002, 18:16

Thanks Andrew,

that's a really nice piece of code

**Andrew-J2000** · Jun 3, 2002, 19:17

i just wanted to make sure nothing dodgy can be put into the code

thx tho

**Eric1776** · Sep 19, 2002, 04:56

it's only a matter of moving the onmouse over to the tr tag

If a browser doesn't support JavaScript what would happen?

**creole** · Sep 19, 2002, 05:57

Try turning Javascript off and see.

**Mike** · Sep 19, 2002, 08:13

Originally posted by Eric1776

If a browser doesn't support JavaScript what would happen?

It wouldn't work.

www.GUIstuff.com has a generator for mouse over TD's (or TR's in your case) that are also links. It doesn't work in NS though.

**Myth** · Sep 19, 2002, 08:33

Nice work Andrew, but how can I get it to work if I'm using echo?

Ie.

echo("<tr valign='top'> \n");

echo("<td>$year</td>\n");
echo("<td>$cond</td>\n");
echo("<td>$workorder</td>\n");

I tried outting the onMouseover in the <tr ....
but kept getting a parsing error!

Thanks.

**Mike** · Sep 19, 2002, 12:06

PHP Code:


<?php



echo("<tr onMouseOver=\"alter(this, 'orange')\" onMouseOut=\"alter(this, '')\">\r\n");



?>

You have to use a backslashe ( \ ) to escape all the other quotes in the echo statement.

**Myth** · Sep 20, 2002, 05:16

Very well done! Works like a charm!

Thanks again!

**Mike** · Sep 21, 2002, 15:18

You're welcome

The SitePoint Forums have moved.

User Tag List

Thread: Ho to highlight a row of a table onMouseOver?

Thread Tools

Display

Ho to highlight a row of a table onMouseOver?

Outstanding!

Bookmarks

Bookmarks

Posting Permissions