Download highlight table row script

Put this into your <HEAD> section

	<style type="text/css">
	
	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;
	}
	
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(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<rows.length;no++){
			rows[no].onmouseover = highlightTableRow;
			rows[no].onmouseout = resetRowStyle;
			
			if(whichClassOnClick){
				rows[no].onclick = clickOnTableRow;	
			}
		}
		
	}
	</script>

Put this into your <BODY> section

<h1>Table example 1</h1>
<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>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Head of marketing</td>
			<td>70.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Kate</td>
			<td>18</td>
			<td>Marketing</td>
			<td>50.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mona</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mike</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Mark</td>
			<td>25</td>
			<td>Production</td>
			<td>52.000</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

<h1>Table example 2</h1>
<table id="myTable2">
	<thead>
		<tr>
			<td>Name</td>
			<td>Age</td>
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>33</td>
			<td>Production</td>
			<td>55.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>24</td>
			<td>Production</td>
			<td>49.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>25</td>
			<td>Photography</td>
			<td>51.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Anna</td>
			<td>42</td>
			<td>Head of photography</td>
			<td>56.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Rita</td>
			<td>30</td>
			<td>Photography</td>
			<td>54.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Magnus</td>
			<td>25</td>
			<td>Freelancer</td>
			<td>65.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Johnny</td>
			<td>29</td>
			<td>Freelancer</td>
			<td>63.000</td>
			<td>Male</td>
		</tr>	
	</tbody>
</table>

<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>

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:

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.