Ayuda con Jquery

[:ohk<any>]

Buenas gente, tengo una tabla de este tipo:

Código (html4strict) [Seleccionar] Expandir


<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:

Código (javascript) [Seleccionar] Expandir


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:

Código (javascript) [Seleccionar] Expandir


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

[Shell Root]

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.

Código (javascript) [Seleccionar] Expandir

alert($('#n1').val());

Pero cuando sabes el indice del tr en donde estas situado, puedes hacer una especie de contador, por ej:

Código (javascript) [Seleccionar] Expandir

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.

[:ohk<any>]

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


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 

Código (javascript) [Seleccionar] Expandir


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".

[#!drvy]

@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

Código (html4strict) [Seleccionar] Expandir

<input id='hola' type='text' ...>
<input id='hola' type='text' ...>

CORRECTO

Código (html4strict) [Seleccionar] Expandir

<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

Código (javascript) [Seleccionar] Expandir

     $(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

Código (css) [Seleccionar] Expandir

     tr.active td {
       background-color: #ccc;
     }
     
     .oc {display:none;}

HTML

Código (html4strict) [Seleccionar] Expandir

   <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