Navegar en un grid

beandfa · #1 (**permalink**) 17/01/2005, 17:47

Hola ... estoy a punto de tronar .. porfavor pido ayuda urgente
Lo que necesito hacer es navegar entre varias ROWs de una tabla con las teclas hacia arriba y hacia abajo !!!!
obviamente si estas hasta arriba y le das TECLA ARRIBA, se vaya al último <TR> y si estas hasta abajo y le das TECLA ABAJO se vaya al primer <TR>

Me imagino que debo poner un input type=radio o algo así
pero no se como y ya estoy perdido !!!

Espero pronta respuesta

dasaevc · #2 (**permalink**) 18/01/2005, 12:55

Me imagino que quieres hacer lo siguiente:
Tienes una tabla y quieres que al darle flecha abajo/arriba la fila <tr> se ponga de otro color, si lo que quieres hacer es eso, te dejo un ejemplo:

Código HTML:

<script language="JavaScript">
var tabla;
var ban=false;
var count=-1;
document.onkeydown = checkKeycode
function checkKeycode(e) {
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	if(ban && (keycode==38 || keycode==40)){
		if(count>=0){
			tabla.rows[count].style.backgroundColor='';
		}
		if(keycode==38){
			arriba();
		}
		else{
			abajo();
		}
		tabla.rows[count].style.backgroundColor='#CCCCCC';
	}
}
function arriba(){
	if(count<1){
		count=tabla.rows.length-1;
	}
	else count--;
}
function abajo(){
	if(count>=(tabla.rows.length-1)){
		count=0;
	}
	else count++;
}
function init(){
	tabla=document.getElementById("tabla");
}
</script>

<style type="text/css">
<!--
.tabla {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	font-weight: bolder;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	width: 400px;
	border: 0px;
}
-->
</style>
<body onLoad="init()" onFocus="ban=false">
<table id="tabla" class="tabla" onClick="ban=true">
	<tr>
		<td>Aqui</td>
		<td>Está</td>
		<td>la fila</td>
		<td>uno</td>
	</tr>
	<tr>
		<td>Aqui</td>
		<td>Está</td>
		<td>la fila</td>
		<td>dos</td>
	</tr>
	<tr>
		<td>Aqui</td>
		<td>Está</td>
		<td>la fila</td>
		<td>tres</td>
	</tr>
</table>
</body>

te lo explico, para que empieze a funcionar, le das click en la tabla y puedes navegar en las filas, al darle click afuera de la tabla, ya no puedes hacer nada, hasta que le des de nuevo click en la tabla, me funcionó con Mozilla Firefox y IExplorer