Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: :ohk<any> en 21 Diciembre 2015, 03:24 am



Título: Ayuda con Jquery
Publicado por: :ohk<any> en 21 Diciembre 2015, 03:24 am
Buenas gente, tengo una tabla de este tipo:

Código
  1.  <tbody>
  2.      <tr>
  3.             <td>dato 1</td>
  4.             <td>dato 2</td>
  5.             <input type="hidden" name="n1" id="n1" value="1">
  6.      </tr>
  7.      <tr>
  8.             <td>dato 3</td>
  9.             <td>dato 4</td>
  10.             <input type="hidden" name="n1" id="n1" value="2">
  11.      </tr>
  12.      <tr>
  13.             <td>dato 5</td>
  14.             <td>dato 6</td>
  15.             <input type="hidden" name="n1" id="n1" value="3">
  16.      </tr>
  17.  </tbody>
  18.  

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
  1. enter: function($el) {
  2. alert($el.text());
  3. }
  4.  

"$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
  1. alert($('#n1').val());
  2.  

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


Título: Re: Ayuda con Jquery
Publicado por: Shell Root en 21 Diciembre 2015, 03:37 am
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
  1. alert($('#n1').val());

Pero cuando sabes el indice del tr en donde estas situado, puedes hacer una especie de contador, por ej:
Código
  1. var id = $("table tr").index(this);
  2. alert($('#n' + id).val());

PD: Escribí el código de memoria, así que tendrás que depurarlo porque no se si funciona.


Título: Re: Ayuda con Jquery
Publicado por: :ohk<any> en 21 Diciembre 2015, 03:49 am
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

Código
  1. var idi = $('#dat', $el).val();
  2.  

Tan simple, tan sencillo, tan obvio. (Tan tonto yo)

Saludos


Mod: No hacer triple post. Usar el botón "modificar".


Título: Re: Ayuda con Jquery
Publicado por: #!drvy en 21 Diciembre 2015, 14:23 pm
@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
  1. <input id='hola' type='text' ...>
  2. <input id='hola' type='text' ...>

CORRECTO
Código
  1. <input id='hola1' type='text' ...>
  2. <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
  1.      $(function() {
  2.        $('table')
  3.            .find('tr')
  4.            .keynavigator({
  5.              keys: {
  6.             enter: function($el) {
  7.            alert($('.n1',$el).val());
  8.          }
  9.        }
  10.            }) //[tr, tr, tr]
  11.            .eq(0) //[tr] (in the middle)
  12.            .addClass('active')
  13.            .parent() //tbody
  14.            .focus();
  15.      });

CSS
Código
  1.      tr.active td {
  2.        background-color: #ccc;
  3.      }
  4.  
  5.      .oc {display:none;}

HTML
Código
  1.    <table id="example2">
  2.      <tbody>
  3.        <tr>
  4.          <td>Row1</td>
  5.          <td class='oc'><input type="hidden" name="n1" class="n1" value="1"></td>
  6.        </tr>
  7.        <tr>
  8.          <td>Row2</td>
  9.          <td class='oc'><input type="hidden" name="n2" class="n1" value="2"></td>
  10.        </tr>
  11.        <tr>
  12.          <td>Row3</td>
  13.          <td class='oc'><input type="hidden" name="n3" class="n1" value="3"></td>
  14.        </tr>
  15.      </tbody>
  16.    </table>

DEMO: http://plnkr.co/edit/9yQMoM8e7qsNenDzJVfn?p=preview

Saludos