JavaScript - Recorrer una tabla e ir poniendo texto

 
Vista:
sin imagen de perfil
Val: 6
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 2.503
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer una tabla e ir poniendo texto

Publicado por joel (541 intervenciones) el 13/07/2020 08:22:27
Hola Marcelo, solo tienes que añadirle el focus... te he añadido la linea 22.

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
48
49
<!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';
  K[celda].querySelector("input").focus();
}
 
</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 respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 6
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer una tabla e ir poniendo texto

Publicado por marcelo (2 intervenciones) el 13/07/2020 09:07:07
Te lo agradezco muchísimo Joel, valoro en grande tu ayuda.
Estoy con un proyecto de juegos (crucigramas y otros) y hace poco que empecé a tratar de aprender programación para poder diseñarlos.
Saludo cordial y muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar