Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/09/2016, 17:03
slikp
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 11 años, 9 meses
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.