Recorrer text dentro de tabla html

xGs_Manco · #1 (**permalink**) 18/11/2011, 16:39

Buenas tardes.

Primero les cuento que tengo una tabla de esta manera, donde tengo textbox y divs. Necesito recorrer con las flechas del teclado por estos textbox como si estuviera en excel.

<html>
<head>
</head>

<body>
<table>
<tr>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><div>00</div></td>
<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>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><div>00</div></td>
<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>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><div>00</div></td>
<td><div>00</div></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</table>
</body>

</html>

Me podrian decir como lo hago.

Necesito que el foco se vaya directamente al textbox.

Espero que me puedan colaborar.

Ojalá se pueda con Jquery.

Gracias,

Franz1628 · #2 (**permalink**) 18/11/2011, 20:56

Lo puedes hacer con contentEditable
Te dejo un ejemplo

Código HTML:

Ver original<table contentEditable="true" border="1">
    <tr><td>dakv</td><td>advno</td><td>advno</td></tr>
    <tr><td>dakv</td><td>advno</td><td>advno</td></tr>
    <tr><td>dakv</td><td>advno</td><td>advno</td></tr>
    <tr><td>dakv</td><td>advno</td><td>advno</td></tr>
</table>

si quieres más información lo puedes ver en este tutorial bien explicado
http://fgualambo.blogspot.com/2011/1...teditable.html

Saludos

quedecosas · #3 (**permalink**) 19/11/2011, 02:23

http://www.terminally-incoherent.com/blog/2009/10/08/jquery-grid-like-table-with-keyboard-navigation/ checa este articulo

o este otro

http://www.apterasoftware.com/Blog/Post/11-02-17/Excel_Functionality_Using_jQuery.aspx

saludos

IsaBelM · #4 (**permalink**) 19/11/2011, 06:06

lee este tema. cuando hayas entendido el código, editalo para que en lugar de tabular con "enter" tabule con "arrow". aquí tienes un listado de valores ascii de la tecla pulsada