Download highlight table row script


Put this into your <HEAD> section

Put this into your <BODY> section


Step 1: Define rollover effects layout in CSS

This script assignes a row to a CSS(Cascading Style Sheet) class when you move your mouse over it. In the demo, I have created 2 CSS classes, one for the first table and another one for the other. This is the CSS code I use:



Step 2: Define row click effects in CSS

You may specify row colors when someone clicks on a row. In the demo, I have these two CSS classes:


You will find this code in the <STYLE type="text/css"> section.

Step 3: Build your table

Now, you create your table by use of plain HTML. Example:

<table id="myTable">
      <td>Managing director</td>
      <td>Head of production</td>

Remember to give your table an ID(example: "myTable"). Also notice that I have used a <THEAD> and a <TBODY> tag to separate table heading from table content. When a <TBODY> tag exists in your table, the script will only highlights the rows within this tag, i.e. all rows except the heading. Without this TBODY tag, all rows will be highlighted.

Step 4: Call javascript function

The last thing you have to do is to call a Javascript function which adds the rollover effect. Example:

<script type="text/javascript">

The addTableRolloverEffect takes three arguments. The first one is the "id" of the table. The second one is the name of the css class you want to assign to the rows when the mouse rolls over it.

The last argument is the name of a CSS class that will be assigned to the row when someone clicks on it. This argument is optional. If you don't want a onclick effect, just use false as argument(example: addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');).

I have called this function twice in this demo because I wanted to add this effect to two tables.


body{ font-size:0.8em; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin:0px; padding:0px; } img{ border:0px; } thead td{ font-weight:bold; color:#000; background-color:#E2EBED; } td{ padding:2px; } table{ border:1px solid #000; border-collapse: collapse; } h1{ font-size:1.3em; margin-bottom:0px; } table,h1,p,#ads{ margin-left:10px; } #ads{ margin-top:20px; } /* These classes are used by the script as rollover effect for table 1 and 2 */ .tableRollOverEffect1{ background-color:#317082; color:#FFF; } .tableRollOverEffect2{ background-color:#000; color:#FFF; } .tableRowClickEffect1{ background-color:#F00; color:#FFF; } .tableRowClickEffect2{ background-color:#00F; color:#FFF; } /************************************************************************************************************ (C), November 2005 This is a script from You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! Alf Magne Kalleland ************************************************************************************************************/ var arrayOfRolloverClasses = new Array(); var arrayOfClickClasses = new Array(); var activeRow = false; var activeRowClickArray = new Array(); function highlightTableRow() { var tableObj = this.parentNode; if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode; if(this!=activeRow){ this.setAttribute('origCl',this.className); this.origCl = this.className; } this.className = arrayOfRolloverClasses[]; activeRow = this; } function clickOnTableRow() { var tableObj = this.parentNode; if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode; if(activeRowClickArray[] && this!=activeRowClickArray[]){ activeRowClickArray[].className=''; } this.className = arrayOfClickClasses[]; activeRowClickArray[] = this; } function resetRowStyle() { var tableObj = this.parentNode; if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode; if(activeRowClickArray[] && this==activeRowClickArray[]){ this.className = arrayOfClickClasses[]; return; } var origCl = this.getAttribute('origCl'); if(!origCl)origCl = this.origCl; this.className=origCl; } function addTableRolloverEffect(tableId,whichClass,whichClassOnClick) { arrayOfRolloverClasses[tableId] = whichClass; arrayOfClickClasses[tableId] = whichClassOnClick; var tableObj = document.getElementById(tableId); var tBody = tableObj.getElementsByTagName('TBODY'); if(tBody){ var rows = tBody[0].getElementsByTagName('TR'); }else{ var rows = tableObj.getElementsByTagName('TR'); } for(var no=0;no
TANG at 11:30AM, 2011/06/16.
But could you plz explain how to exclude a single row from the rollover effect
vivek at 01:08PM, 2011/06/17.
Where is the download link...?
Systen at 06:07AM, 2011/06/18.
Yogesh Gandhi
There is a cleaner and shorter way to do all this...Just read this
Yogesh Gandhi at 05:58PM, 2011/11/10.
how to give a common rowhighlight for 2 tables?if a hover the mouse on any row of table1, corresponding row in table 2 should also be highlighted.
PVS BHARADWAJ at 12:26PM, 2011/11/14.
please add download link
shahadat at 09:46AM, 2012/07/04.
Beautiful example, thanks very much. But if used with dynamically created tables, ie created via Ajax, it doesn't work. This is because the page has already been rendered on open, and the javascript doesn't run again when the table is created later.The solution is to wrap all the javascript code in a function and call that function from an event that occurs after the table is created. (The css code should stay as is in the header, since that does apply to dynamically created objects.) So thanks again for the very nice example.
Al at 03:22AM, 2013/09/20.
Medicine information leaflet. Drug Class.
<a href="">can i order generic pregabalin without dr prescription</a> in USA
Some about medicine. Get information now.
AjdED at 06:45AM, 2021/04/27.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021