Buenas gente, tengo una tabla de este tipo:
<table>
<tbody>
<tr>
<td>dato 1</td>
<td>dato 2</td>
<input type="hidden" name="n1" id="n1" value="1">
</tr>
<tr>
<td>dato 3</td>
<td>dato 4</td>
<input type="hidden" name="n1" id="n1" value="2">
</tr>
<tr>
<td>dato 5</td>
<td>dato 6</td>
<input type="hidden" name="n1" id="n1" value="3">
</tr>
</tbody>
</table>
Y tengo una funcion en Jquery que me ayuda a moverme entre las filas de la tabla mediante el teclado y cuando presiono "ENTER" se activa un evento.
Este evento me permite hacer lo siguiente:
enter: function($el) {
alert($el.text());
}
"$el" es un objeto con el que puedo leer los datos que tiene esa fila.
Lo que quiero es poder aprovechar "$el" y obtener el valor que tiene el input que esta en modo oculto en esa misma fila.
Mas o menos algo asi:
alert($('#n1').val());
Si hago lo mencionado arriba lo unico que me muestra es el valor 1.
Que es lo que tiene el primer id n1 sin importar si mi foco esta en la segunda fila o tercera.
Lo que necesito es obtener el valor del input oculto que esta en la fila en la que hago el focus.
Me dejo entender?
Saludos
No ando en mi PC pero puede decirte algo:
Cuando haces lo siguiente, te muestra el 1 porque es un valor "quemado" es decir, fijo.
alert($('#n1').val());
Pero cuando sabes el indice del tr en donde estas situado, puedes hacer una especie de contador, por ej:
var id = $("table tr").index(this);
alert($('#n' + id).val());
PD: Escribí el código de memoria, así que tendrás que depurarlo porque no se si funciona.
Hola, gracias por tu pronta respuesta.
Aun no he revisado bien lo que dijiste pero aca tengo el codigo completo y funcionando para tener una mejor idea.
http://plnkr.co/edit/64E6ej2sAwQo6UoAg8vu?p=preview (http://plnkr.co/edit/64E6ej2sAwQo6UoAg8vu?p=preview)
Saludos
A pesar de varios intentos con diferentes codigos encontrados en este y otros foros y la documentación de la api utilizada y algunos otros intentos, no he logrado conseguirlo.
Algunto tiene alguna idea de como puedo hacerlo?
Saludos
Como en las peliculas, lo solucione al darme por vencido :xD
var idi = $('#dat', $el).val();
Tan simple, tan sencillo, tan obvio. (Tan tonto yo)
Saludos
Mod: No hacer triple post. Usar el botón "modificar".
@ohk, estas usando el mismo ID para identificar a todos los inputs ocultos en las filas de la tabla. Esto es INCORRECTO y el navegador solo tiene el cuenta el primero. Un ID nunca puede ser repetido. Para que me entiendas.
INCORRECTO
<input id='hola' type='text' ...>
<input id='hola' type='text' ...>
CORRECTO
<input id='hola1' type='text' ...>
<input id='hola2' type='text' ...>
En tu caso, solucionarías el problema de forma facil simplemente cambiando los IDs por clases CSS. El código que has puesto tampoco es correcto. En una tabla no puedes poner directamente un <input>. La tabla solo admite hijos relativos a esta (tr,thead,tbody etc).
JS
$(function() {
$('table')
.find('tr')
.keynavigator({
keys: {
enter: function($el) {
alert($('.n1',$el).val());
}
}
}) //[tr, tr, tr]
.eq(0) //[tr] (in the middle)
.addClass('active')
.parent() //tbody
.focus();
});
CSS
tr.active td {
background-color: #ccc;
}
.oc {display:none;}
HTML
<table id="example2">
<tbody>
<tr>
<td>Row1</td>
<td class='oc'><input type="hidden" name="n1" class="n1" value="1"></td>
</tr>
<tr>
<td>Row2</td>
<td class='oc'><input type="hidden" name="n2" class="n1" value="2"></td>
</tr>
<tr>
<td>Row3</td>
<td class='oc'><input type="hidden" name="n3" class="n1" value="3"></td>
</tr>
</tbody>
</table>
DEMO: http://plnkr.co/edit/9yQMoM8e7qsNenDzJVfn?p=preview
Saludos