How To Change Row Background Color OnMouseOver

Written by Dave

Monday, 24 December 2007

I've seen on some sites, more specifically web applications, where when you put your mouse over a specific row of a list or table, that row would change color - like it was being highlighted. It took me forever to figure out how to do this.

I was accustomed to using JavaScript's getElementById() function. I was thinking when priting from a database, to give each row an ID also. So when you call onMouseOver() it would call another function which would then use getElementById() and change the back ground color of that specific row.

Well, now that I'm getting more and more used to all the functions out there, I've learned that you can use the 'this' keyword, as well as className to do this effect. Here's an example of what I'm talking about.



	
		
			Row 1 Column 1
			Row 1 Column 2
		
		
			Row 2 Column 1
			Row 2 Column 2
		
		
			Row 3 Column 1
			Row 3 Column 2
		
		
			Row 4 Column 1
			Row 4 Column 2
		
		
			Row 5 Column 1
			Row 5 Column 2
		
		
			Row 6 Column 1
			Row 6 Column 2

Now here's the code.

<table class="ex" width="500" cellspacing="1"> <tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal">
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal"> <td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal"> <td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
<tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal"> <td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
</tr>
<tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal"> <td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
</tr>
<tr onmouseover="this.className='normalActive'" onmouseout="this.className='normal'" class="normal"> <td>Row 6 Column 1</td>
<td>Row 6 Column 2</td>
</tr>
</table>

So basically, all you need to do is create a normal class for when your mouse is not over the row, and then another class for when your mouse is over it. I hope this helps! I've been trying to get at this for awhile. I'm glad I figured it out. It really helps when you have lots of rows in a table and you start getting cross eyed.

Comments

Add New

RSS

Iban (118.93.75.xxx) 2008-12-15 18:27:42

Thanks that was helpful for me.

Anonymous (118.93.75.xxx) 2008-12-15 18:28:28

Sibashis Das (122.173.179.xxx) 2009-02-19 23:33:50

Thanks to reveal this trick for all. Great job... It will be great if you share your knowledge with people like us who are just starting there career in IT World.