Soy bastante novato y me he encontrado con el siguiente problema:
Usando un elemento para renderizar tablas (Jmesa) quiero poder moverme con el tabulador por las celdas de la tabla (cosa que no hacer por si mismo la tabla generada), estas a su vez tienen un DIV dentro en cual cuando se hace click cambia la celda a editables.
La intencion es que con el tabulador vaya pasando de una celda a otra, y hacerlas editables en el momento en el que el foco esta sobre cada celda/DIV.
Solo he conseguido acercarme usando jquery, pero mis escasos conocimientos con jquery no me permiten avanzar.
Este es el codigo de la funcion de jquery:
$("td").bind("keydown", function(e){
if (e.keyCode == 9){ /* 9 = Tabulador*/
$(this).next("td").find("div").focus();
$(this).next("td").find("div").click();
$(this).next("td").find("div").css("border","solid 2px red");
}
});
Este es el codigo fuente de la tabla, lo pongo por si a alguien se le ocurre alguna manera mejor de recorrer las celdas con el tabulador y hacerlas editables:
<table id="lstComentarios" border="0" cellpadding="0" cellspacing="0" class="table" >
<thead>
<tr class="header" >
<td class="id" ><div></div></td>
<td><div onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" onclick="jQuery.jmesa.addSortToLimit('lstComentari os','1','userId','asc');onInvokeAction('lstComenta rios', 'sort')" >Identificador</div></td>
<td><div onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" onclick="jQuery.jmesa.addSortToLimit('lstComentari os','2','userName','asc');onInvokeAction('lstComen tarios', 'sort')" >Nombre de usuario</div></td>
<td><div onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" onclick="jQuery.jmesa.addSortToLimit('lstComentari os','3','email','asc');onInvokeAction('lstComentar ios', 'sort')" >Email</div></td>
</tr>
</thead>
<tbody class="tbody" >
<tr id="lstComentarios_row1" class="odd" onclick="selectTr(this,1, 'lstComentarios_row','selected','odd'); document.getElementById('identificador').value = '1'; document.getElementById('userName').value = 'ususario1'; seleccionarOption('email', 'ususario1mail');" onmouseover="overTr(this, 1,'highlight');" onmouseout="outTr(this, 1,'odd');" >
<td class="id" ><div class="wsColumn" onclick="var up = {};up['userId']='1';jQuery.jmesa.createWsColumn(this, 'lstComentarios',up,'null')" >1</div></td>
<td><div class="wsColumn" onclick="var up = {};up['userId']='1';jQuery.jmesa.createWsColumn(this, 'lstComentarios',up,'userId')" >1</div></td>
<td><div class="wsColumn" onclick="var up = {};up['userId']='1';jQuery.jmesa.createWsColumn(this, 'lstComentarios',up,'userName')" >ususario1</div></td>
<td><div class="wsColumn" onclick="var up = {};up['userId']='1';jQuery.jmesa.createWsColumn(this, 'lstComentarios',up,'email')" >ususario1mail</div></td>
</tr>
</tbody>
</table>
Si algo no se entiende lo explico, pero por favor si a alguien se le ocurre alguna manera de solucionar mi problema ¿podria echarme una mano?
Gracias de antemano a todos.
Un saludo!!
