JavaScript Table Row Highlight

One of the hard things to do when looking at a table, especially large tables, is to follow the same row all the way across the table. To deal with this some coders when creating a table will alternate the colors on a table, making one row dark, and the other one a lighter color. There is another way to make a table easy to read, that is to highlight the row that the mouse is currently hovering on. With JavaScript we can make this effect with a very small and lightweight script.

<table>
 <tr>
  <th>Website Name</th>
  <th>Description</th>
  <th>Address</th>
</tr>
 <tr onMouseOver="this.bgColor='#FFB6B8'" onMouseOut="this.bgColor='#FFFFFF'">
   <td>Code-Sucks</td>
   <td>Coding Tutorials</td>
   <td><a href="http://www.code-sucks.com">Code-sucks.com</a></td>
 </tr>
 <tr onMouseOver="this.bgColor='#FFB6B8'" onMouseOut="this.bgColor='#FFFFFF'">
   <td>W3C School</td>
   <td>School for web code</td>
   <td><a href="http://www.w3schools.com">W3Schools</a></td>
 </tr>
</table>

Just by adding the onMouseOver, and onMouseOut, it changes the background color when the user mouses over the table. If we add a little CSS, to the events we can actually invert the colors of the row that the mouse is currently on.

<table>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Job</th>
</tr>
 <tr onMouseOver="this.style.background='#000000'; this.style.color='#FFFFFF'" onMouseOut="this.style.background='#FFFFFF'; this.style.color='#000000'">
   <td>John</td>
   <td>30</td>
   <td>Programer</td>
 <tr onMouseOver="this.style.background='#000000'; this.style.color='#FFFFFF'" onMouseOut="this.style.background='#FFFFFF'; this.style.color='#000000'">
   <td>Robert</td>
   <td>28</td>
   <td>Product Testing</td>
 </tr>
</table>

Below is an example of both code snippets.