[ Foro de Javascript ]

Recorrer una tabla e ir poniendo texto

09-Jul-2020 09:12
Invitado (Marcelo)
0 Respuestas

Hola, quería pedirles si podían ayudarme con este problema:
es una tabla de 3x3 y tengo el siguiente código que permite recorrerla arbitrariamente utilizando las teclas de flechas (teclas de dirección del teclado).
Quisiera poder recorrerla en la dirección que elija (ya sea para arriba, abajo o para algún costado), y que se vayan abriendo los campos de texto para ir escribiendo, pero sin pinchar con el mouse.
Puse   input type = text   en cada celda, pero no sé que mas debería poner para que se vayan abriendo automáticamente a medida que vaya pasando por cada celda.
Desde ya, muchas gracias.

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

celda = 0;

function recorrer(z) {
 posicion = document.getElementById('tabla');
 K = posicion.getElementsByTagName('td');
 
        if(z.keyCode==37 && celda>0) salta=-1;
  else if(z.keyCode==38 && celda>2) salta=-3;
  else if(z.keyCode==39 && celda<K.length-1) salta=1;
  else if(z.keyCode==40 && celda<K.length-3) salta=3;
  else return;

 K[celda].style.background = 'white';
 celda+=salta;
 K[celda].style.background = 'red';  }

</script>

</head>

<body onkeyup = "recorrer(event)">

<table id="tabla">
<tr><td style="background:red"> <input type="text"> </td>
<td> <input type="text"> </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"> </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"> </td>
<td> <input type="text"> </td>
</tr>
</table>

</body>
</html>













Si ya eres usuario del sistema, puedes contestar desde tu cuenta y así ganar prestigio.

Si sólo eres un visitante, puedes optar por...