Foros del Web » Programando para Internet » Jquery »

Seleccion de elementos con Jquery

Estas en el tema de Seleccion de elementos con Jquery en el foro de Jquery en Foros del Web. - Buenas en primer lugar disculpen el titulo si no es el mas adecuado, pero no supe muy bien que titulo dar... Tengo muchisimo tiempo ...
  #1 (permalink)  
Antiguo 29/09/2016, 17:03
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 11 años, 1 mes
Puntos: 0
Seleccion de elementos con Jquery

- Buenas en primer lugar disculpen el titulo si no es el mas adecuado, pero no supe muy bien que titulo dar... Tengo muchisimo tiempo que no codeaba absolutamente nada y en estos momentos tengo un dilema con un proyecto para uso personal y la verdad creo que mi problema no es tanto de codigo si no de "Logica" y necesito de una ayuda de su parte por favor, me explico. Tengo lo siguiente:

- Aun no me he metido con el Php pero la estructura basica del Html seria esta.

Código HTML:
Ver original
  1. <div class="panel-body">
  2.                         <div class="panel" id="panel_formulario">
  3.                             <!--===================================================-->
  4.                           <div class="row">
  5.                             <table class="table text-center table-hover table-reflow">
  6.                               <thead>
  7.                                 <tr>
  8.                                   <th class="text-center">ITEM</th>
  9.                                   <th class="text-center">Cant.</th>
  10.                                   <th class="text-center">Producto</th>
  11.                                   <th class="text-center">Marca</th>
  12.                                   <th class="text-center">Precio</th>
  13.                                   <th class="text-center">Importe</th>
  14.                                 </tr>
  15.                               </thead>
  16.                                 <tbody>
  17.                                   <!--
  18.                                     SE SUPONE QUE AQUI VAN A CAER LOS DATOS DE UN FOREACH TRAIDOS DESDE UN AJAX
  19.                                     Y TODO LO DEMAS EN CADA TD PARA ASIGNAR LOS DATOS CORRESPONDIENTES
  20.                                     EN CADA ITERACION Y MAS O MENOS SE VERA ASI
  21.                                   -->
  22.                                     <tr class="ref">
  23.                                       <td>1</td>
  24.                                       <td><input class="cant" type="number" name=""></td>
  25.                                       <td>Otto</td>
  26.                                       <td>Elite</td>
  27.                                       <td >225 bsf</td>
  28.                                       <td>450 bsf </td>
  29.                                     </tr>
  30.                
  31.                                     <tr class="ref">
  32.                                       <td>2</td>
  33.                                       <td><input class="cant" type="number" name=""></td>
  34.                                       <td>Thornton</td>
  35.                                       <td>Primor</td>
  36.                                       <td>175 bsf</td>
  37.                                       <td>175 bsf </td>
  38.                                     </tr>
  39.                
  40.                                     <tr class="ref">
  41.                                       <td>3</td>
  42.                                       <td><input class="cant" type="number" name=""></td>
  43.                                       <td>Vaso Refrigerante Titanium</td>
  44.                                       <td>Primor</td>
  45.                                       <td>1500 bsf</td>
  46.                                       <td>4500 bsf </td>
  47.                                     </tr>
  48.                                 </tbody>
  49.                             </table>
  50.                           </div>
  51.                           <div class="row">
  52.                                 <div class="col-sm-3 col-sm-offset-3">
  53.                                   <button class="btn btn-primary btn-labeled fa fa-print fa-lg" >Generar Venta</button>
  54.                                 </div>
  55.                                 <div class="col-sm-3 ">
  56.                                   <button class="btn btn-danger btn-labeled fa fa-repeat fa-lg" id="btn-cancelar" type="reset">Cancelar Venta</button>
  57.                                 </div> 
  58.                           </div>
  59.  
  60.                             <!--===================================================-->
  61.                         </div>
  62.                     </div>

- Lo que da como resultado esto.



- Ok se supone que utilizo el buscador y cada vez que selecciono un articulo se anexa el nuevo Item... Ahora si al grano lo que intento hacer es multiplicar lo que marque en ROJO que seria el PRECIO por la cantidad que asigno con el inpunt tipo number que marque en AZUL. Yo se que puedo seleccionar el valor de type number de miles de formas como por ejemplo esta:

Código HTML:
Ver original
  1. $("input[type='number']").click(function(e) {
  2.             e.preventDefault();
  3.                 var data2 = $(this).val(); ;
  4.                     alert(' Valor de cant: '+data2);
  5.             });

- Y de igual forma puedo seleccionar el valor dentro del TD aunque yo prefiero poner un input type hide he imprimir el monto y luego obtener su valor algo asi.

Código HTML:
Ver original
  1. <tr class="ref">
  2.     <td>1</td>
  3.     <td><input class="cant" type="number" name=""></td>
  4.     <td>Otto</td>
  5.     <td>Elite</td>
  6.     <td>225 bsf</td>
  7.     <td>450 bsf </td>
  8.         <td><input class="precio" type="hide" name="" value="AQUI LO IMPRIMO CON PHP"></td>
  9.   </tr>
  10.  
  11. <!- Y LUEGO LO OBTENGO Y LO MULTIPLICO -->
  12.  
  13. $("input[type='number']").click(function(e) {
  14.                 e.preventDefault();
  15.  
  16.                 var data = $('.precio').val();
  17.                 var data2 = $(this).val(); ;
  18.                 var result = data * data2;
  19.                     alert('Valor de precio: '+data+ ' Valor de cant: '+data2+ ' Valor de resultado: '+result);
  20.                
  21.                
  22.             });

- Y Eso me funciona pero mi problema es que si incremento el item 2, o el item 3 siempre me toma los datos del item 1, he intentado de varias formas y la verdad ya estoy algo viejo para esto jajaja asi que pido un poco de ayuda, que estoy haciendo mal? como selecciono cada elemento individual de cada tr? porque mientras los voy anexando con Jquery siempre van a tener la misma Class y como dije quizas es cuestion de Logica y lo estoy estructurando mal o como dije antes existe algo en Jquery que me permita seleccionar los elementos por separado de cada TR?, para asi multiplicarlos con sus correspondientes precios y cantidades?

- Bueno muchas gracias de antemano al que me brinde su ayuda y espero haberme explicado bien... Saludos.
  #2 (permalink)  
Antiguo 30/09/2016, 02:19
 
Fecha de Ingreso: enero-2014
Ubicación: Navarra
Mensajes: 94
Antigüedad: 10 años, 4 meses
Puntos: 18
Respuesta: Seleccion de elementos con Jquery

Hola.

en lugar de :

var data = $('.precio').val();

prueba asi:

var data = $(this).parent().parent().find('.precio').val();

saludos
  #3 (permalink)  
Antiguo 30/09/2016, 06:03
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 11 años, 1 mes
Puntos: 0
De acuerdo Respuesta: Seleccion de elementos con Jquery

- Saludos sintel_1, estoy en el trabajo un tanto atareado pero probe a lo rapido lo que me planteastes y hombre al parecer es justamente lo que necesitaba eres barbaro... Por lo pronto muchas gracias creo que diste en la solucion de verdad te agradesco.

Etiquetas: elementos, seleccion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:32.