<!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>
|
