Recorrer una tabla e ir poniendo texto
Publicado por marcelo (2 intervenciones) el 13/07/2020 05:57:22
Hola, quería pedirles ayuda con este problema:
Es una tabla de 3x3 y tengo el siguiente código que permite recorrerla de forma arbitraria, utilizando las teclas de flechas (teclas de dirección del teclado).
Quisiera poder recorrerla en la dirección que elija, ya sea para abajo, arriba, izquierda o derecha. Ésto puedo hacerlo con este programa, pero quisiera que también se vayan abriendo los campos de texto para ir escribiendo, pero sin tener que pinchar con el mouse.
Puse input type = "text" en cada celda, pero no sé que más debería poner para que se vayan abriendo automáticamente a medida que pase por cada celda.
Muchas gracias.
Es una tabla de 3x3 y tengo el siguiente código que permite recorrerla de forma arbitraria, utilizando las teclas de flechas (teclas de dirección del teclado).
Quisiera poder recorrerla en la dirección que elija, ya sea para abajo, arriba, izquierda o derecha. Ésto puedo hacerlo con este programa, pero quisiera que también se vayan abriendo los campos de texto para ir escribiendo, pero sin tener que pinchar con el mouse.
Puse input type = "text" en cada celda, pero no sé que más debería poner para que se vayan abriendo automáticamente a medida que pase por cada celda.
Muchas gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>
Valora esta pregunta
0
