1

Tengo esta tabla que genero al hacer una consulta a mi base de datos, en donde jalo automaticamente el precio, pero para calcular el total de cada uno de los materiales necesito proporcionar una cantidadTabla de sistema

El total lo calculo de manera dinamica al introducir la cantidad, la tabla esta generada dentro de un foreachy utilizo un contador para asignarle un id a cada inputde total, como se muestra aqui en mi codigo:

Esta es mi funcion javascript para calcular el total de cada material

function calculo(val){
        var cantidad = document.getElementById("canti"+val).value;
        var resultado = document.getElementById("resultado"+val);
        var precio = document.getElementById("precio"+val).value;
        var totalgeneral = document.getElementById("totgen");
        resultado.value = cantidad*precio;
    }
<table class="table table-striped">
    <thead>
        <th class="text-center" scope="col">Nombre</th>
        <th class="text-center" scope="col">Proveedor</th>
        <th class="text-center" scope="col">Precio</th>
        <th class="text-center" scope="col">Moneda</th>
        <th class="text-center" scope="col">Cantidad</th>
        <th class="text-center" scope="col">Unidad</th>
        <th class="text-center" scope="col">Total</th>
    </thead>
    <tbody>
        <tr>
        <?php foreach($sql as $columnas):?>
            <td class="text-center"><?php echo $columnas['nombre'];?></td>
            <td class="text-center"><?php echo $columnas['proveedor'];?></td>
            <td class="text-center"><input id="precio<?php echo $cont?>" type="number" class="form-control" value="<?php echo $columnas['precio']?>" style="text-align:center;"></td>
            <td class="text-center"><?php echo $columnas['moneda'];?></td>
            <td class="text-center"><input id="canti<?php echo $cont?>" type="number" class="form-control" style="text-align:center;" value="0" onkeyup="calculo(<?php echo $cont?>);"></td>
            <td class="text-center"><?php echo $columnas['unidad'];?></td>
            <td class="text-center"><input id="resultado<?php echo $cont?>" type="text" class="form-control" name="resultado<?php echo $cont?>" readonly></td>
        </tr>
        
        <?php 
    $cont = $cont+1;
endforeach;?>

    </tbody>

</table>
<div class="pull-right col-sm-4">
<h4>Total: </h4><input id="totgen" type="text" name="" readonly="true" class="form-control" value="0" style="text-align:center;">
</div>

Este es mi codigo php de como se genera la tabla (Destacando que se uso una consulta a la base de datos para llenar la mayoria de los campos) Especificamente lo que quiero es sumar toda la columna de totales y mostrarlos en la parte de abajo como total general, Gracias por su ayuda.

1 respuesta 1

2

Una solución rápida:

  • En PHP añade una clase que identifique los totales de fila (los que se rellenan con la función JS que compartes).
  • Extiende la función en JavaScript para que sume todos los totales de fila y los ponga en el total general.

Así quedaría el código:

function calculo(val){
        var cantidad = document.getElementById("canti"+val).value;
        var resultado = document.getElementById("resultado"+val);
        var precio = document.getElementById("precio"+val).value;
        var totalgeneral = document.getElementById("totgen");
        resultado.value = cantidad*precio;
        
        // suma todos los totales de fila
        var totalesFila = document.querySelectorAll(".total-fila");
        var total = 0;
        for (var x = 0; x < totalesFila.length; x++) {
          total += (parseInt(totalesFila[x].value) || 0);
        }
        totalgeneral.value = total;
    }
<table class="table table-striped">
    <thead>
        <th class="text-center" scope="col">Nombre</th>
        <th class="text-center" scope="col">Proveedor</th>
        <th class="text-center" scope="col">Precio</th>
        <th class="text-center" scope="col">Moneda</th>
        <th class="text-center" scope="col">Cantidad</th>
        <th class="text-center" scope="col">Unidad</th>
        <th class="text-center" scope="col">Total</th>
    </thead>
    <tbody>
        <tr>
        <?php foreach($sql as $columnas):?>
            <td class="text-center"><?php echo $columnas['nombre'];?></td>
            <td class="text-center"><?php echo $columnas['proveedor'];?></td>
            <td class="text-center"><input id="precio<?php echo $cont?>" type="number" class="form-control" value="<?php echo $columnas['precio']?>" style="text-align:center;"></td>
            <td class="text-center"><?php echo $columnas['moneda'];?></td>
            <td class="text-center"><input id="canti<?php echo $cont?>" type="number" class="form-control" style="text-align:center;" value="0" onkeyup="calculo(<?php echo $cont?>);"></td>
            <td class="text-center"><?php echo $columnas['unidad'];?></td>
            <td class="text-center"><input id="resultado<?php echo $cont?>" type="text" class="form-control total-fila" name="resultado<?php echo $cont?>" readonly></td>
        </tr>
        
        <?php 
    $cont = $cont+1;
endforeach;?>

    </tbody>

</table>
<div class="pull-right col-sm-4">
<h4>Total: </h4><input id="totgen" type="text" name="" readonly="true" class="form-control" value="0" style="text-align:center;">
</div>


Y aquí puedes ver cómo sería con algunas filas ya rellenas:

function calculo(val) {
  var cantidad = document.getElementById("canti" + val).value;
  var resultado = document.getElementById("resultado" + val);
  var precio = document.getElementById("precio" + val).value;
  var totalgeneral = document.getElementById("totgen");
  resultado.value = cantidad * precio;

  // suma todos los totales de fila
  var totalesFila = document.querySelectorAll(".total-fila");
  var total = 0;
  for (var x = 0; x < totalesFila.length; x++) {
    total += (parseInt(totalesFila[x].value) || 0);
  }
  totalgeneral.value = total;
}
<table class="table table-striped">
  <thead>
    <th class="text-center" scope="col">Nombre</th>
    <th class="text-center" scope="col">Proveedor</th>
    <th class="text-center" scope="col">Precio</th>
    <th class="text-center" scope="col">Moneda</th>
    <th class="text-center" scope="col">Cantidad</th>
    <th class="text-center" scope="col">Unidad</th>
    <th class="text-center" scope="col">Total</th>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">Nombre 0</td>
      <td class="text-center">Proveedor 0</td>
      <td class="text-center"><input id="precio0" type="number" class="form-control" value="10" style="text-align:center;"></td>
      <td class="text-center">$</td>
      <td class="text-center"><input id="canti0" type="number" class="form-control" style="text-align:center;" value="0" onkeyup="calculo(0);"></td>
      <td class="text-center">
        unidades
      </td>
      <td class="text-center"><input id="resultado0" type="text" class="form-control total-fila" name="resultado0" readonly></td>
    </tr>
    <tr>
      <td class="text-center">Nombre 1</td>
      <td class="text-center">Proveedor 1</td>
      <td class="text-center"><input id="precio1" type="number" class="form-control" value="15" style="text-align:center;"></td>
      <td class="text-center">$</td>
      <td class="text-center"><input id="canti1" type="number" class="form-control" style="text-align:center;" value="0" onkeyup="calculo(1);"></td>
      <td class="text-center">
        unidades
      </td>
      <td class="text-center"><input id="resultado1" type="text" class="form-control total-fila" name="resultado1" readonly></td>
    </tr>
<tr>
      <td class="text-center">Nombre 2</td>
      <td class="text-center">Proveedor 2</td>
      <td class="text-center"><input id="precio2" type="number" class="form-control" value="25" style="text-align:center;"></td>
      <td class="text-center">$</td>
      <td class="text-center"><input id="canti2" type="number" class="form-control" style="text-align:center;" value="0" onkeyup="calculo(2);"></td>
      <td class="text-center">
        unidades
      </td>
      <td class="text-center"><input id="resultado2" type="text" class="form-control total-fila" name="resultado2" readonly></td>
    </tr>
  </tbody>

</table>
<div class="pull-right col-sm-4">
  <h4>Total: </h4><input id="totgen" type="text" name="" readonly="true" class="form-control" value="0" style="text-align:center;">
</div>

4
  • Al momento de que calculo el resultado de un material, me deja un 0 a la izquierda, si sigo agregando cantidad al mismo material me suma correctamente el total Pero al momento de hacerlo con otro material en lugar de sumarlo lo concatena a la derecha con el resultado previo. Commented el 30 abr. 2019 a las 20:33
  • @MarcosSaúlCañasVázquez actualice la respuesta hace unos minutos para resolver eso mismo. Y también he añadido un ejemplo para que puedas verlo funcionar.
    – Alvaro Montoro
    Commented el 30 abr. 2019 a las 20:37
  • 2
    Justo al momento de terminar de escribir mi comentario vi la actualizacion, y ahora esta funcionando perfecto ¡Muchisimas Gracias! Commented el 30 abr. 2019 a las 20:38
  • me gano en responder la respuesta de la soluccion Commented el 30 abr. 2019 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.