Download highlight table row script

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

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:

.tableRollOverEffect1{
  background-color:#317082;
  color:#FFF;
}

.tableRollOverEffect2{
  background-color:#000;
  color:#FFF;
}

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:

.tableRowClickEffect1{
  background-color:#F00;
  color:#FFF;
}
.tableRowClickEffect2{
  background-color:#00F;
  color:#FFF;
}

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">
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Position</td>
      <td>Income</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>37</td>
      <td>Managing director</td>
      <td>90.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Susan</td>
      <td>34</td>
      <td>Partner</td>
      <td>90.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>David</td>
      <td>29</td>
      <td>Head of production</td>
      <td>70.000</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

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">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>

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.

Comments

TANG


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) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. 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!

www.dhtmlgoodies.com
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[tableObj.id];

activeRow = this;

}

function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='';
}
this.className = arrayOfClickClasses[tableObj.id];

activeRowClickArray[tableObj.id] = this;

}

function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
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 05:30AM, 2011/06/16.
vivek
TY
But could you plz explain how to exclude a single row from the rollover effect

vivek at 07:08AM, 2011/06/17.
Systen
Where is the download link...?
Systen at 12:07AM, 2011/06/18.
Yogesh Gandhi
There is a cleaner and shorter way to do all this...

Just read this

http://javakafunda.blogspot.com/2011/11/how-to-highlight-table-rows-on.html
Yogesh Gandhi at 10:58AM, 2011/11/10.
PVS BHARADWAJ
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 05:26AM, 2011/11/14.
shahadat
please add download link
shahadat at 03:46AM, 2012/07/04.
Al
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 09:22PM, 2013/09/19.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com