Skip to main content
se añadieron 3603 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
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;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>
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 += totalesFila[x].value;
        }
        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>
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>
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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 += totalesFila[x].value;
        }
        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>