Highlighting a table row on the onMouseOver or onKeyPress/onKeyDown event

Downloads:3480

Bookmark this code

Rank : 3/5
Rated by : 2 user(s)

Developer:

Junaid Shabbir | 35 submission(s)

Date Uploaded:

November 01,2009

Level:

Intermediate

Size:

0 Bytes

Category:

Javascript -> Tips and Tricks

Developer Says:

Here is the code to highlight a table row when the mouse pointer hovers over it or when you press down/up arrow keys. 38 are 40 are keycodes of down arrow and up arrow respectively. The code is also useful if you want to capture other keys. Just alert the key variable to get the keycode of the key typed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table row highlight on using arrow keys and mouseover with Javascript</title>
<style>
.row{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#333;
	background-color:#FFF;
	text-align:left;
}
.highlight{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#333;
	background-color:#06C;
	text-align:left;
	color:#FFF;
}

</style>
<script language="javascript"> 
	current_row=1;
	nn=(document.layers)?true:false;
	ie=(document.all)?true:false;
	function keyDown(e) {
		var evt=(e)?e:(window.event)?window.event:null;
		if(evt){
			var key=(evt.charCode)?evt.charCode: ((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));
			if(key==38){
				id1=document.getElementById('row'+current_row);
				if(id1){
					id2=document.getElementById('row'+parseInt(current_row-1));
					if(id2){
						current_row=current_row-1;
						id1.className='row';
						id2.className='highlight';
					}
				}
			}
			else if(key==40){
				id1=document.getElementById('row'+current_row);
				if(id1){
					id2=document.getElementById('row'+parseInt(current_row+1));
					if(id2){
						current_row=current_row+1;
						id1.className='row';
						id2.className='highlight';
					}
				}
			}
		}
	}
document.onkeydown=keyDown;
if(nn) document.captureEvents(Event.KEYDOWN);
 </script>
</head>

<body>
	<table width="300px" cellspacing="1px" bgcolor="#CCCCCC">
    	<tr bgcolor="#FFFFFF"><td class="row" id="row1" onmouseover="this.className='highlight'; current_row=1" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row2" onmouseover="this.className='highlight' ;current_row=2" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row3" onmouseover="this.className='highlight' ;current_row=3" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row4" onmouseover="this.className='highlight'; current_row=4" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row5" onmouseover="this.className='highlight'; current_row=5" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row6" onmouseover="this.className='highlight'; current_row=6" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row7" onmouseover="this.className='highlight'; current_row=7" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row8" onmouseover="this.className='highlight'; current_row=8" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>
    	<tr bgcolor="#FFFFFF"><td class="row" id="row9" onmouseover="this.className='highlight' ;current_row=9" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>                                                                
    </table>
</body>
</html>

User Reviews

ricardo
[23-Oct-2011]

Well, in the begining I thought it was like the :hover element of css, but I think the up and down on the keyboard it's not par of :hover.... man, this code is cool.

Keyword:
Category:
	Advance Search >>