Foros del Web » Programando para Internet » Javascript »

Suma de tabla dinamica

Estas en el tema de Suma de tabla dinamica en el foro de Javascript en Foros del Web. Hola, tengo una tabla la cual se consulta datos de productos como costo unitario, cantidad y subtotal desde mysqli Ejemplo consulta una venta de un ...
  #1 (permalink)  
Antiguo 01/04/2020, 17:35
 
Fecha de Ingreso: octubre-2013
Mensajes: 79
Antigüedad: 6 años, 7 meses
Puntos: 0
Pregunta Suma de tabla dinamica

Hola, tengo una tabla la cual se consulta datos de productos como costo unitario, cantidad y subtotal desde mysqli

Ejemplo consulta una venta de un producto la cual tiene costo de 10 y cantidad 1, da un subtotal de 10, la situacion es de que si yo modifico el input de cantidad a 2 quiero que me actualice con javascript el valor de subtotal a 20 y me de un total de 20


Este es mi codigo:
Código PHP:
  $RESULTADOS_CONSULTA_ACTUAL mysqli_query($conexion,"SELECT * FROM $PV_VENTAS WHERE ID_VENTA='$COD_VENTA'");
  while(
$consulta_venta_ACTUAL mysqli_fetch_array($RESULTADOS_CONSULTA_ACTUAL))
  {
       
$ID_PRO=$consulta_venta_ACTUAL['ID'];
       
$CODIGO_PRO_VENTA=$consulta_venta_ACTUAL['CODIGO'];
       
$NOM_PRO_VENTA=$consulta_venta_ACTUAL['PRODUCTO'];
       
$UMEDIDA_VENTA=$consulta_venta_ACTUAL['UMEDIDA'];
       
$PRE_PRO_VENTA=$consulta_venta_ACTUAL['P_UNITARIO'];
       
$CANT_VENTA=$consulta_venta_ACTUAL['CANTIDAD'];
       
$SUBTOTAL_VENTA=$consulta_venta_ACTUAL['SUBTOTAL'];
echo
'    
                                            <td><input class="form-control" type="text" readonly="" value="'
.$CODIGO_PRO_VENTA.'" ></td>
                                            <td><input class="form-control" type="text" readonly="" value="'
.$NOM_PRO_VENTA.'"></td>
                                            <td class="text-center"><input class="form-control" type="number" value="'
.$PRE_PRO_VENTA.'" readonly="" id="UNITARIO"></td>
                                            <td class="text-center"><input class="form-control" type="number" name="cantidad[]" required="" value="'
.$CANT_VENTA.'" id="CANTIDAD" onChange="suma(this.form)"></td>
                                            <td class="text-center"><input class="form-control importe_linea" type="number" name="subtotal[]" value="'
.$SUBTOTAL_VENTA.'" readonly="" id="SUBTOTAL_CU"></td>
                                            <td class="text-center"><button onclick="confirmacion_eliminar()" class="btn btn-primary" type="button" style="background-color: rgb(223,78,78);"><i class="fa fa-trash"></i></button></td>
                                            </tr>
'

Si tienen algun codigo de ejemplo agradezco su ayuda anticipada.
  #2 (permalink)  
Antiguo 02/04/2020, 03:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.603
Antigüedad: 18 años, 1 mes
Puntos: 1283
Respuesta: Suma de tabla dinamica

Hola:

En este subforo el código php no vale. Pero como respuesta, tendrás que usar el manejador de evento onchange del elemento que se puede modificar y hacer esa actualización:

onchange="subtotal.value = parseInt(precio.value) * parseInt(this.value)"...

Aunque sería algo más complejo al tratarse de un array...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 02/04/2020, 11:37
 
Fecha de Ingreso: octubre-2013
Mensajes: 79
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Suma de tabla dinamica

La situación es de que en la consulta de la venta vienen como 4 o 9 productos y los mismos que al modificar la cantidad solo funciona el primer campo las subsecuentes no hace nada... (en javascript)
  #4 (permalink)  
Antiguo 02/04/2020, 14:01
 
Fecha de Ingreso: abril-2006
Mensajes: 426
Antigüedad: 14 años, 1 mes
Puntos: 96
Respuesta: Suma de tabla dinamica

primero tienes que crear el escucha del EVENTO en javascript, luego, tratar de identificar el el INput de Entrada, y el de salida, para ello, cada Elemento HTML deberia ir Identificado

y con ello creo que lo mejor es que cambies un poco el HTML que te da PHP

por que el atributo ID de un elemento html debe ser UNICO ya que se considera como identificador,

bueno lo bueno es que javascript no es estricto, te dejo las funciones que necesitaria tu codigo, son funciones apra navegadores modernos, si queires adaptala para navegadores antiguos

recuerda que el "script" debe ir al final de tu tabla ,
el codigo puede contener errores de sintaxys, no hagas copy paste, solo comprende y si ay funciones no que no entiendas como funciona, GOOGLEA
Código HTML:
Ver original
  1. <script type="text/javascript">
  2.   //creamos la funcion de Evento "input" sucesor del "change"
  3.   function escucharInputDeCantidad(evento){
  4.     var input_cantidad= evento.target;//necesitamos saber que Input es para Obter su PADRE = td luego el padre del padre TR , el cual contiene el resultado
  5.     var tr = input_cantidad.parentElement.parentElement;
  6.     var input_subtotal=tr.querySelector('#SUBTOTAL_CU');
  7.     var input_unitario=tr.querySelector('#UNITARIO');
  8.    
  9.     //ahora hacemos la mutiplicacion con valores
  10.     let variable_cantidad = ParseInt(input_cantidad.getAttribute('value'));
  11.     //comprobamos que  sea un numero valido en la cantidad
  12.     if(variable_cantidad<1){ return ; }
  13.  
  14.    let subtotal = ParseFloat(input_unitario.getAttribute('value')) * variable_cantidad;
  15.    //El subtotal lo enviamos al INPUT correspondiente
  16.    input_subtotal.setAttribute('value',subtotal);
  17.    //buscamos
  18.    //Ahora para ejecutamos la Funcion para Calcultar el TOTAL global
  19.    obtenerElTotal();
  20.  }
  21.  function obtenerElTotal(){
  22.    var total=0;
  23.    document.querySelectorAll('tr input#SUBTOTAL_CU').forEach(function(subtotal_input){
  24.      let subtotal= ParseFloat(subtotal_input.getAttribute());
  25.      if(subtotal>0){
  26.         total = total + subtotal;
  27.       }
  28.     ;});
  29.     alert(total);
  30.   }
  31.   //elegimos todos los elementos input ( name="cantidad[]") y le añadimos el EVENTO de "input" sucesor del "change"
  32.   document.querySelectorAll('tr #CANTIDAD').forEach(function(el_input){
  33.     el_input.addEventListener('input',escucharInputDeCantidad);
  34.   ;})
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #5 (permalink)  
Antiguo 03/04/2020, 10:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.603
Antigüedad: 18 años, 1 mes
Puntos: 1283
Respuesta: Suma de tabla dinamica

Hola:

Te había comentado que al tratarse de un array no sería tan fácil... y aprovecho para indicarte un error que tiene tu código: un atributo id debe ser único, y por el código deduzco que al menos repites el id="UNITARIO"... "CANTIDAD"...

Una posible solución es que acompañes ese id con un número (que incrementarías en cada iteración del bucle)... así Podría quedar "Cantidad_2"... entonces al modificar la cantidad, por el id podrás relacionar su respectivo precio...

Una observación: cuando llevan un juego de corchetes (por su tratamiento con php supongo), el nombre en javascript también debe llevar ese juego de corchetes, y detrás el índice... Creo que algo hay en este artículo: El abc de los formularios.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo



La zona horaria es GMT -6. Ahora son las 13:27.