How can I re-calculate a number in a table, if more details are added?

0

introducir el código aquí
var SumaTotalCotizacionGenerales = function(){
//Obtengo la última fila ingresada en la tabla
var cotizaciongenerales = $("#gastos_totales_generales");
var valor1 = cotizaciongenerales.find('input[type="text"]:eq(0)');
var valor2 = cotizaciongenerales.find('input[type="text"]:eq(1)');
var total_costo_general = cotizaciongenerales.find('input[type="text"]:eq(2)');

valor1.on('change', function(){
  total_costo_general.val(parseInt(valor1.val())*parseInt(valor2.val())/100);
});
valor2.on('change', function(){
  total_costo_general.val(parseInt(valor2.val())*parseInt(valor1.val())/100);  
});
};
SumaTotalCotizacionGenerales();


introducir el código aquí 
<div class="caja8">
<div class="alcance">
<h1>GASTOS GENERALES</h1> 
</div>
<div class="container theme-showcase" role="main">
<br>
<div class="form-group">
<table class='table table-bordered table-hover' id="gastos_totales_generales">
<tr>
                <th>DESCRIPCION</th>
                <th>PORCENTAJE</th>
                <th>SUB TOTAL</th>
                <th>TOTAL</th>
            </tr>
            <tr>
                <th>GASTOS GENERALES</th>
                <td><input type="text" class="form-control" name="porcentaje_gasto_generales" id="porcentaje_gasto_generales" value="<?php echo $power['porcentaje_gastos_general'];?>" ></td>
                <td><input type="text" class="form-control" name="sub_total_gasto_generales"  id="sub_total_gasto_generales" value="<?php echo $power['sub_total_gasto_general'];?>" readonly></td>
                <td><input type="text" class="form-control" name="total_gasto_generales" id="total_gasto_generales" value="<?php echo $power['total_gasto_general'];?>" readonly></td>
            </tr>
            <tr>
                <th>UTILIDAD</th>
                <td><input type="text" class="form-control" name="porcentaje_utilidad" id="porcentaje_utilidad" value="<?php echo $power['porcentaje_utilidad_general'];?>"></td>
                <td><input type="text" class="form-control" name="sub_total_utilidad"  id="sub_total_utilidad"  value="<?php echo $power['sub_total_utilidad_general'];?>" readonly></td>
                <td><input type="text" class="form-control" name="total_utilidad"      id="total_utilidad" value="<?php echo $power['total_utilidad_general'];?>" readonly></td>
            </tr>

        </table>                 
    </div>  
</div>

introducir el código aquí 
var sumaTotalGeneral = function(){
//Inicializo en 0 el valor a establecer indicando el resultado de la sumatoria
var totalgeneralsuma0 = 0;
var totalgeneralsuma1 = 0;
var totalgeneralsuma2 = 0;
//Recorro todas las filas de la tabla
$('tr','#tablaDetalleMaterialEinsumo').each(function(){
 //Obtengo el campo del cual quiero tomar el valor para sumarlo
 var campo_total0 = $(this).find('input[type="text"]:eq(4)');
 //Agrego a totales el nuevo valor
 var numero0 = parseInt(campo_total0.val()); 
 totalgeneralsuma0 += isNaN(numero0) ? 0 : numero0; 
 });


 $('tr','#tablaDetallePersonaEmaquina').each(function(){
 //Obtengo el campo del cual quiero tomar el valor para sumarlo
 var campo_total2 = $(this).find('input[type="text"]:eq(5)');
 //Agrego a totales el nuevo valor
 var numero1 = parseInt(campo_total2.val()); 
 totalgeneralsuma1 += isNaN(numero1) ? 0 : numero1; 
 });

 $('tr','#tablaDetalleGastoGeneral').each(function(){
 //Obtengo el campo del cual quiero tomar el valor para sumarlo
 var campo_total3 = $(this).find('input[type="text"]:eq(4)');
 //Agrego a totales el nuevo valor
 var numero2 = parseInt(campo_total3.val()); 
 totalgeneralsuma2 += isNaN(numero2) ? 0 : numero2; 
 });


 var to= totalgeneralsuma0+totalgeneralsuma1+totalgeneralsuma2;
 //Establezco el resultado de la suma
 $('#sub_total_gasto_generales').val(to);
 };


introducir el código aquí 
function funcNuevaDetallePersonaEmaquina() 
{
$("#tablaDetallePersonaEmaquina")
.append
(
$('<tr>')
.append
(
  $('<td>')
  .append
  (
    $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'detalle_personal_maquina[]')
    )
  )
.append
(
  $('<td>')
  .append
  (
    $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'cantidad_detalle_persona[]')
    )
  )
.append
(
  $('<td>')
  .append
  (
    $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'horas_unitarias_persona[]')
    )
  )
.append
(
 $('<td>')
 .append
 (
  $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'total_horas_persona[]').prop('readonly', true)
  )
 )
.append
(
 $('<td>')
 .append
 (
  $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'valor_unit_persona[]')
  )
 )
.append
(
 $('<td>')
 .append
 (
  $('<input>').attr('type', 'text').addClass('form-control').attr('name', 'valor_total_HH_persona[]').prop('readonly', true)
  )
 )
.append
(
  $('<td>').addClass('text-center')

  .append
  (
    $('<div>').addClass('btn btn-warning').text('Eliminar')
    )            
  )      
);
    
asked by Monsiens 29.12.2017 в 14:27
source

1 answer

0

Try calling SumaTotalCotizacionGenerales(); each time you add a new ITEM, but at function remove the on.change like this:

var SumaTotalCotizacionGenerales = function(){
   //Obtengo la última fila ingresada en la tabla
   var cotizaciongenerales = $("#gastos_totales_generales");
   var valor1 = cotizaciongenerales.find('input[type="text"]:eq(0)');
   var valor2 = cotizaciongenerales.find('input[type="text"]:eq(1)');
   var total_costo_general = cotizaciongenerales.find('input[type="text"]:eq(2)');

  total_costo_general.val(parseInt(valor1.val())*parseInt(valor2.val())/100);

};

(you must remove the on.change since these do not run until you change the input therefore calling the function would not perform the calculation).

so that everyone who calls that function performs the calculation and does not wait for a change in the input to execute the calculation.

Now the on.change would only call this function, you can use onchange he HTML for this case:

<input  type="text" 
        class="form-control" 
        name="porcentaje_gasto_generales"
        onchange="SumaTotalCotizacionGenerales()" <!--Así-->
        value=10
        id="porcentaje_gasto_generales">

Example:

var SumaTotalCotizacionGenerales = function() {
  //Obtengo la última fila ingresada en la tabla
  var cotizaciongenerales = $("#gastos_totales_generales");
  var valor1 = cotizaciongenerales.find('input[type="text"]:eq(0)');
  var valor2 = cotizaciongenerales.find('input[type="text"]:eq(1)');
  var total_costo_general = cotizaciongenerales.find('input[type="text"]:eq(2)');
  
  total_costo_general.val(parseInt(valor1.val()) * parseInt(valor2.val()) / 100);
  
/*  valor1.on('change', function() {
    total_costo_general.val(parseInt(valor1.val()) * parseInt(valor2.val()) / 100);
  });
  valor2.on('change', function() {
    total_costo_general.val(parseInt(valor2.val()) * parseInt(valor1.val()) / 100);
  });*/
};


SumaTotalCotizacionGenerales();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caja8">
	<div class="alcance">
		<h1>GASTOS GENERALES</h1> 
	</div>
	<div class="container theme-showcase" role="main">
	<br>
	<div class="form-group">
		<table class='table table-bordered table-hover' id="gastos_totales_generales">
			<tr>
                <th>DESCRIPCION</th>
                <th>PORCENTAJE</th>
                <th>SUB TOTAL</th>
                <th>TOTAL</th>
	        </tr>
            <tr>
                <th>GASTOS GENERALES</th>
                <td>
                	<input  type="text" 
                			class="form-control" 
                			name="porcentaje_gasto_generales"
                      onchange="SumaTotalCotizacionGenerales()"
                      value=10 
                			id="porcentaje_gasto_generales">
                </td>
                <td>
                	<input  type="text" 
                			class="form-control" 
                			name="sub_total_gasto_generales"
                      onchange="SumaTotalCotizacionGenerales()"
                      value=12000 
                			id="sub_total_gasto_generales">
                </td>
                <td>
                	<input  type="text" 
                			class="form-control" 
                			name="total_gasto_generales" 
                			id="total_gasto_generales">
                </td>
            </tr>
            <tr>
                <th>UTILIDAD</th>
                <td>
                	<input  type="text"
                			class="form-control" 
                			name="porcentaje_utilidad" 
                			id="porcentaje_utilidad">
                </td>
                <td>
                	<input  type="text"
                			class="form-control" 
                			name="sub_total_utilidad" 
                			 id="sub_total_utilidad">
                </td>
                <td>
                	<input  type="text"
                			class="form-control" 
                			name="total_utilidad" 
                			     id="total_utilidad">
                </td>
            </tr>

        </table>                 
    </div>  
</div>
    
answered by 29.12.2017 / 16:45
source