The following highlights table rows when you press up or down arrow keys or when you roll you mouse over table rows. Click here to view a demo of this code
<!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>Highlight Table Rows 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'">HTML/CSS</td></tr> <tr bgcolor="#FFFFFF"><td class="row" id="row2" onmouseover="this.className='highlight' ;current_row=2" onmouseout="this.className='row'">JavaScript</td></tr> <tr bgcolor="#FFFFFF"><td class="row" id="row3" onmouseover="this.className='highlight' ;current_row=3" onmouseout="this.className='row'">JQuery</td></tr> <tr bgcolor="#FFFFFF"><td class="row" id="row4" onmouseover="this.className='highlight'; current_row=4" onmouseout="this.className='row'">Ajax</td></tr> <tr bgcolor="#FFFFFF"><td class="row" id="row5" onmouseover="this.className='highlight'; current_row=5" onmouseout="this.className='row'">PHP</td></tr> <tr bgcolor="#FFFFFF"><td class="row" id="row6" onmouseover="this.className='highlight'; current_row=6" onmouseout="this.className='row'">.Net</td></tr> </table> </body> </html>
More Javascript tips