1

estoy desarrollando un formulario con lineas de detalle.. El problema es que no consigo obtener los totales de las columnas.. (sumatorias totales) introducir la descripción de la imagen aquí

Como se muestra en la imagen deseo obtener la sumatoria de "prec_oz" y mandarlo en el input "peso Ozs", que seria : 3,295.5 del mismo modo para la columna "total" , que igualmente seria "11254.841 + 544.59 = 11,799.431 ... El problema que no logro realizarlo T.T........

codigo HTML `

                                        <table id="laboratorios"
                                            class="table table-striped table-bordered order-list-trabajovarios">
                                            <thead>
                                                <tr>
                                                    <th>Orden</th>
                                                    <th>Lote</th>
                                                    <th>Grs</th>
                                                    <th>Fineza</th>
                                                    <th>Grs_Pagables</th>
                                                    <th>Prec_Oz</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input name="detalleVario[0].orden" id="travar-0-trabajo" class="input-group has-success">
                                                    </td>
                                                    <td>
                                                        <input name="detalleVario[0].lote" id="travar-0-lote" class="input-group has-success">
                                                    </td>
                                            <td>
                                                        <input name="detalleVario[0].grs" id="travar-0-grs" class="input-group has-success" onfocusout="focusoutTraVarCantidad(0)">
                                                    </td>
                                                    
                                                    <td>
                                                        <input name="detalleVario[0].precio" id="travar-0-precio" class="input-group has-success" value="99.97" readonly="readonly" 
                                                        style='background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;'>
                                                    </td>
                                                        <td>
                                                            <input name="detalleVario[0].total" id="travar-0-total" class="input-group has-success" readonly="readonly" 
                                                        style='background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;'>
                                                
                                                    </td>
                                                        <td>
                                                        <input name="detalleVario[0].prec_Oz" id="travar-0-prec_Oz" class="input-group has-success" onfocusout="focusoutTraVarCantidad2(0)">
                                                    </td>
                                                        <td>
                                                        <input name="detalleVario[0].total2" id="travar-0-total2" class="input-group has-success" readonly="readonly" 
                                                        style='background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;'>
                                                    </td>
                                                    <td>
                                                        <button class="ibtnDel btn btn-danger">
                                                            <i class="material-icons">close</i> Quitar
                                                        </button>
                                                    </td>

                                                </tr>
                                            </tbody>
                                        </table>
                                        <button class="btn btn-success" type="button"
                                            onClick="addTrabajosVarios();">
                                            <span class="btn-label"> <i class="material-icons">check</i>
                                            </span> Agregar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>`

y en el java script utilizo las siguientes funciones para que me calculen ciertas columnas :

function addTrabajosVarios() {
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td><input name="detalleVario['+countTraVar+'].orden" type="text" id="travar-' + countTraVar + '-orden"  class="input-group has-success" /></td>';
            cols += '<td><input name="detalleVario['+countTraVar+'].lote" type="text" id="travar-' + countTraVar + '-lote"    class="input-group has-success" /></td>';

            cols += '<td><input name="detalleVario['+countTraVar+'].grs" type="text" id="travar-' + countTraVar + '-grs"  class="input-group has-success" onfocusout="focusoutTraVarCantidad(' + countTraVar + ')"   /></td>';
            cols += '<td><input name="detalleVario['+countTraVar+'].precio" type="text" id="travar-' + countTraVar + '-precio"  class="input-group has-success" value="99.97" readonly="readonly" style="background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;" /></td>';
            cols += '<td><input name="detalleVario['+countTraVar+'].total" type="text" id="travar-' + countTraVar + '-total"   class="input-group has-success"  readonly="readonly" style="background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;" /></td>';
            cols += '<td><input name="detalleVario['+countTraVar+'].prec_Oz" type="text" id="travar-' + countTraVar + '-prec_Oz"  class="input-group has-success" onfocusout="focusoutTraVarCantidad2(' + countTraVar + ')"   /></td>';
            cols += '<td><input name="detalleVario['+countTraVar+'].total2" type="text" id="travar-' + countTraVar + '-total2"  class="input-group has-success"  readonly="readonly" style="background-color: rgba(239, 239, 239, 0.3); border-radius: 2px; border: 1px solid rgba(118, 118, 118, 0.2); cursor: default;" /></td>';
           
         
            cols += '<td style="display: none;"><input name="detalleVario['+countTraVar+'].tipo" id="travar-'+countTraVar+'-tipo" type="hidden" value="TVA" readonly="readonly"></td>';
            
            cols += '<td><button class="ibtnDel btn btn-danger"> <i class="material-icons">close</i> Quitar </button></td>';
            newRow.append(cols);
            $("table.order-list-trabajovarios").append(newRow);
            countTraVar++;
            countDeleteTraVar++;
        }

        $("table.order-list-trabajovarios").on("click", ".ibtnDel", function(event) {
            $(this).closest("tr").remove();
            countDeleteTraVar -= 1
        });
         let floatTotal=0;
        function focusoutTraVarCantidad(numero) {
            var idCantidad = "#travar-" + numero + "-grs";
         var valueCantidad = parseFloat($(idCantidad).val());
        
            if (!isNaN(valueCantidad)) {
                var idTotal = "#travar-" + numero + "-total";
                floatTotal = (valueCantidad * (99.97/100));
                var fltotal = (valueCantidad * (99.97/100)).toLocaleString();
                    
                    
             $(idTotal).val(fltotal);
                
              
            }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
        }
    function focusoutTraVarCantidad2(numero) {
            var idPrec_Oz = "#travar-" + numero + "-prec_Oz";
         var valuetotal2 = parseFloat($(idPrec_Oz).val());
    
            if (!isNaN(valuetotal2)) {
                var idTotals2 = "#travar-" + numero + "-total2";
                var floatTotal2 = (valuetotal2 * (floatTotal / (31.1035) )).toLocaleString();
              
                
                $(idTotals2).val(floatTotal2);
                
        
                
       }
        }

De ante mano agradezco el apoyo. Saludos!

2 respuestas 2

1

Crearía una función para calcular los totales, esa función sería llamado en varios eventos.

$(document).ready(function(){
    // cuando carga la pagina se calcula los totales
    calculoTotales();

    $("table.order-list-trabajovarios").on("click", ".ibtnDel", function(event) {
        $(this).closest("tr").remove();
        //countDeleteTraVar -= 1

        // al final
        calculoTotales();
    });
});
function calculoTotales() {
    // acumuladores
    let prec_Oz = 0;
    let total2 = 0;

    //obtenemos las filas
    let filas = $('table.order-list-trabajovarios tbody').find('tr')

    // recorremos las filas
    filas.each(function(indice, fila) {

        // eq(indice de la columna empezando por 0)
        let input_prec_Oz = $(this).find('td:eq(5)').find('input'); // input
        let input_total2 = $(this).find('td:eq(6)').find('input'); // input

        let value_input_prec_Oz = 0;
        let value_input_total2 = 0;

        // podria haber más validaciones aparte del vacio
        if (input_prec_Oz.val().trim() !== '') {
            value_input_prec_Oz = parseFloat(input_prec_Oz.val());
        }

        // podria haber más validaciones aparte del vacio
        if (input_total2.val().trim() !== '') {
            value_input_total2 = parseFloat(input_total2.val());
        }

        prec_Oz += value_input_prec_Oz;
        total2 += value_input_total2;
    });

    // representamos los totales en el input correspondiente
    // toFixed es opcional
    $('#total_peso_ozs').val(prec_Oz.toFixed(2));
    $('#total_us').val(total2.toFixed(2));
}

function focusoutTraVarCantidad2(numero) {


    // al final
    calculoTotales();
}

function addTrabajosVarios() {


    // al final
    calculoTotales();
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datos</title>
</head>
<body>
    <table class="order-list-trabajovarios" border="1">
        <thead>
            <tr>
                <th>Orden</th>
                <th>Lote</th>
                <th>Grs</th>
                <th>Fineza</th>
                <th>Grs_Pagables</th>
                <th>Prec_Oz</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
                <td>col4</td>
                <td><input type="text" id="travar-0-prec_Oz" value="5" onfocusout="focusoutTraVarCantidad2(0)"></td>
                <td><input type="text" id="travar-0-total2" value="10" readonly></td>
                <td>
                    <button class="ibtnDel">Quitar</button>
                </td>
            </tr>

            <tr>
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
                <td>col4</td>
                <td><input type="text" id="travar-1-prec_Oz" value="6" onfocusout="focusoutTraVarCantidad2(1)"></td>
                <td><input type="text" id="travar-1-total2" value="12" readonly></td>
                <td>
                    <button class="ibtnDel">Quitar</button>
                </td>
            </tr>

            <tr>
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
                <td>col4</td>
                <td><input type="text" id="travar-2-prec_Oz" value="8" onfocusout="focusoutTraVarCantidad2(2)"></td>
                <td><input type="text" id="travar-2-total2" value="16" readonly></td>
                <td>
                    <button class="ibtnDel">Quitar</button>
                </td>
            </tr>
        </tbody>
    </table>

    <hr>
    <h2>Totales</h2>
    <div>
        <label for="total_peso_ozs">Peso Ozs</label><br>
        <input type="text" id="total_peso_ozs" value="0.00">
    </div>
    <div>
        <label for="total_us">Total US$</label><br>
        <input type="text" id="total_us" value="0.00">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

0

Tendrias que colocar a cada columna una misma clase y luego haces lo siguiente.

$('.clase').blur(function () {
    let sum = 0;
    $('.clase').each(function() {
        sum += Number($(this).val());
    });

    $('#idTotalDeEsaColumna').val(sum);
});​​​​​​​​​

El metodo blur de jquery se dispara cada vez que cambias de input, es decir, cuando este pierde el foco.

$(document).ready(function(){
  $('.uno').blur(function () {
      let sum = 0;
      $('.uno').each(function() {
          sum += Number($(this).val());
      });
      $('#total-uno').val(sum);
  });
  
  $('.dos').blur(function () {
      let sum = 0;
      $('.dos').each(function() {
          sum += Number($(this).val());
      });
      $('#total-dos').val(sum);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="uno">
<input type="text" class="uno">
<input type="text" id="total-uno" placeholder="total-uno">
<br>
<input type="text" class="dos">
<input type="text" class="dos">
<input type="text" id="total-dos" placeholder="total-dos">

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.