Verás al principio creía que iba a ser lo más complicado pero en realidad no lo es tanto.
Aquí te pongo un ejemplo, corta y pega y guarda como html.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Probando</title>
<script language="JavaScript">
/*
SCRIPT: PERROGRUN
SI TIENES DUDAS: [email protected]
WWW.DOUBLEMEDIA.ORG
*/
//esta función crea eventos para ciertos objetos
function addEvent(obj,event_name,func_name){
if (obj.attachEvent){
obj.attachEvent("on"+event_name, func_name);
}else if(obj.addEventListener){
obj.addEventListener(event_name,func_name,true);
}else{
obj["on"+event_name] = func_name;
}
}
var celdaactual =1;// variable para saber en qué fila estamos
var totalfilas= 15;// variable para saber cuantas filas tenemos en total
addEvent(document,"keydown",buscar);
/*con esto lo que se hace es llamar a la función "Buscar" cada vez que ocurre un onkeydown en el documento*/
//Esta función pone la primera línea en azul
function primerafila(){
form1.celdaactual.value ='1';
celdaactual = '1';
document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('tr'+celdaactual).style.color='#ffffff';
document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('celda2'+celdaactual).style.color='#000000';
}
//Esta función es la que hace que todo funcione
function buscar(e){
totalfilas=form1.totalfilas.value;//meto en totalfilas el valor que hay en el form
if (totalfilas>0)//Si hay filas
var code = (document.all) ? e.keyCode : e.which; //Con esto miro el código de la tecla pulsada tanto para ie como para firefox
switch (code){//con esto hago diferentes cosas según la tecla pulsada
case 13: case 9:
//codigo para cuando se pulsa enter
break;
case 40: //codigo para cuando se pulsa la tecla "abajo"
celdaactual =parseInt(form1.celdaactual.value) ;//le digo la celda actual
celdaanterior = celdaactual;//paso el valor a celdaanterior
celdaactual +=1;//le sumo 1 para tener el valor de la celda siguiente
if (document.getElementById('celda'+celdaactual)) {//compruebo que la celda realmente existe
form1.celdaactual.value = celdaactual;//meto el valor en el form
if (document.getElementById('tr'+celdaanterior)){//compruebo que la celda realmente existe
document.getElementById('tr'+celdaanterior).style.backgroundColor='#ffffff';//pinto la nueva de azul y blanco
document.getElementById('tr'+celdaanterior).style.color='#000000';
document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('tr'+celdaactual).style.color='#ffffff';
document.getElementById('celda2'+celdaanterior ).style.backgroundColor='#ffffff';//pinto la vieja de color normal
document.getElementById('celda2'+celdaanterior ).style.color='green';
document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('celda2'+celdaactual).style.color='#000000';}
}
break;
case 38: //codigo para cuando se pulsa la tecla "arriba". Se repite lo de arriba pero en vez de sumar se resta
celdaactual =parseInt(form1.celdaactual.value) ;
celdaanterior = celdaactual;
celdaactual -=1;
if (document.getElementById('celda'+celdaactual)) {
form1.celdaactual.value = celdaactual;
if (document.getElementById('tr'+celdaanterior)){
document.getElementById('tr'+celdaanterior ).style.backgroundColor='#ffffff';
document.getElementById('tr'+celdaanterior ).style.color='#000000';
document.getElementById('tr'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('tr'+celdaactual).style.color='#ffffff';
document.getElementById('celda2'+celdaanterior ).style.backgroundColor='#ffffff';
document.getElementById('celda2'+celdaanterior ).style.color='green';
document.getElementById('celda2'+celdaactual).style.backgroundColor='#3786dd';
document.getElementById('celda2'+celdaactual).style.color='#000000';}
}
break;
default:
break;
} }
</script>
</head>
<body onload="primerafila()">
<form name="form1" onsubmit="return comprobar()">
<input type="hidden" name="totalfilas" value="15">
<input type="hidden" name="celdaactual" value="1">
<input type="hidden" name="enviar" value="no"><br>
<div id="resultados" >
<table width="326" cellpadding="0" cellspacing="0" id="tablaresultados" style="border:1px solid gray">
<tr id="tr1" style="cursor:pointer;">
<td >
<input type="hidden" id="dato1" name="dato1" value="e-bussines">
<div id="celda1">e-bussines</div>
</td>
<td align="right" id="celda21" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr2" style="cursor:pointer;">
<td >
<input type="hidden" id="dato2" name="dato2" value="E-BUSSINES COMO UNA OPORTUNIDAD DE NEGOCIO ">
<div id="celda2">E-BUSSINES COMO UNA OPORTUNIDAD DE NEGOCIO </div>
</td>
<td align="right" id="celda22" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr3" style="cursor:pointer;">
<td >
<input type="hidden" id="dato3" name="dato3" value="Ejercicios Resueltos">
<div id="celda3">Ejercicios Resueltos</div>
</td>
<td align="right" id="celda23" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr4" style="cursor:pointer;">
<td >
<input type="hidden" id="dato4" name="dato4" value="El americano de la calle: slang">
<div id="celda4">El americano de la calle: slang</div>
</td>
<td align="right" id="celda24" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr5" style="cursor:pointer;">
<td >
<input type="hidden" id="dato5" name="dato5" value="El efecto de precarga en Flash">
<div id="celda5">El efecto de precarga en Flash</div>
</td>
<td align="right" id="celda25" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr6" style="cursor:pointer;">
<td >
<input type="hidden" id="dato6" name="dato6" value="El inglés en los negocios">
<div id="celda6">El inglés en los negocios</div>
</td>
<td align="right" id="celda26" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr7" style="cursor:pointer;">
<td >
<input type="hidden" id="dato7" name="dato7" value="El lenguaje de programación C# ">
<div id="celda7">El lenguaje de programación C# </div>
</td>
<td align="right" id="celda27" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr8" style="cursor:pointer;">
<td >
<input type="hidden" id="dato8" name="dato8" value="El Netcat. La navaja suiza de los hackers y administradores ">
<div id="celda8">El Netcat. La navaja suiza de los hackers y administradores </div>
</td>
<td align="right" id="celda28" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr9" style="cursor:pointer;">
<td >
<input type="hidden" id="dato9" name="dato9" value="El Registro de Windows "LA MADRE DEL CORDERO"">
<div id="celda9">El Registro de Windows "LA MADRE DEL CORDERO"</div>
</td>
<td align="right" id="celda29" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr10" style="cursor:pointer;">
<td >
<input type="hidden" id="dato10" name="dato10" value="Emule">
<div id="celda10">Emule</div>
</td>
<td align="right" id="celda210" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr11" style="cursor:pointer;">
<td >
<input type="hidden" id="dato11" name="dato11" value="Emule Avanzado">
<div id="celda11">Emule Avanzado</div>
</td>
<td align="right" id="celda211" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr12" style="cursor:pointer;">
<td >
<input type="hidden" id="dato12" name="dato12" value="Encriptar tus conversaciones del MSN Messenger">
<div id="celda12">Encriptar tus conversaciones del MSN Messenger</div>
</td>
<td align="right" id="celda212" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr13" style="cursor:pointer;">
<td >
<input type="hidden" id="dato13" name="dato13" value="Ensamblador">
<div id="celda13">Ensamblador</div>
</td>
<td align="right" id="celda213" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
<tr id="tr14" style="cursor:pointer;">
<td >
<input type="hidden" id="dato14" name="dato14" value="Excel">
<div id="celda14">Excel</div>
</td>
<td align="right" id="celda214" style="color:green;font-size:9px;"><nobr>
7 Resultados
</td>
</tr>
<tr id="tr15" style="cursor:pointer;">
<td >
<input type="hidden" id="dato15" name="dato15" value="Extendiendo Ruby con C">
<div id="celda15">Extendiendo Ruby con C</div>
</td>
<td align="right" id="celda215" style="color:green;font-size:9px;"><nobr>
1 Resultado
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Parece mucha tela para cortar pero creo que si miras bien las funciones no lo es tanto. Te he puesto comentarios en todo el código para que entiendas más o menos lo que voy haciendo.