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>