4

Bien, tengo una tabla sencilla para que se pueda entender rápido lo que necesito porque la tabla original es demasiado grande, entonces hice este ejemplo rapido:

 function calcular_c(){
        const tiempo1 = parseInt(document.getElementById('tiempo1').value);
        const costo1 = parseInt(document.getElementById('costo1').value);
       
        const tiempo2 = parseInt(document.getElementById('tiempo2').value);
        const costo2 = parseInt(document.getElementById('costo2').value);

        const tiempo3 = parseInt(document.getElementById('tiempo3').value);
        const costo3 = parseInt(document.getElementById('costo3').value);

        const total1 = tiempo1 * costo1 ; 
        const total2 = tiempo2 * costo2 ; 
        const total3 = tiempo3 * costo3 ; 

        document.getElementById('total1').value = total1;
        document.getElementById('total2').value = total2;
        document.getElementById('total3').value = total3;
        
        const suma_horas = tiempo1 + tiempo2 + tiempo3;
        const suma_total = total1+  total2 + total3 ;

        document.getElementById('total_tiempo').value = suma_horas;
        document.getElementById('total_total').value = suma_total;
    
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <th>tiempo</th>
                <th>costo</th>
                <th>total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo1" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo1" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total1" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo2" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo2" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total2" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td><input type="number" class="form-control" id="tiempo3" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="costo3" value="" onkeyup="calcular_c();"></td>
                <td><input type="number" class="form-control" id="total3" value="" onkeyup="calcular_c();"></td>
            </tr>
        </tbody>
        <tfoot>
            <tbody>
                <tr>
                    <th>total tiempo</th>
                    <th></th>
                    <th>total suma</th>
                </tr>
                <tr>
                    <th><input type="number" class="form-control" id="total_tiempo" value="" onkeyup="calcular_c();"></th>
                    <th></th>
                    <th><input type="number" class="form-control" id="total_total" value="" onkeyup="calcular_c();"></th>
                </tr>
            </tbody>
        </tfoot>
    </table>
</div>

Lo que necesito es que cuando ingrese una cantidad se muestre en el total, sin importar si aun faltan campos por llenar de forma vertical (columnas)

Ejemplo lo que quiero conseguir:

introducir la descripción de la imagen aquí

entones como se ve en la imagen, quisiera que llenando solo 1 o 2 inputs el total de esa columna se vaya mostrando.

1 respuesta 1

1

Basta con comprobar si ha sido posible realizar el parseado del valor como número. Te recomendaría utilizar una función auxiliar:

function ensureNumber( val, def ) {
  var def = def || 0;
  var parsed = parseInt( val );

  return isNaN( parsed ) ? def : parsed;
}

Y cambiar tu código a

const tiempo1 = ensureNumber( document.getElementById( 'tiempo1' ).value );
...

Por defecto, devuelve 0 si el valor no es un número. Si necesitas otro valor (por ejemplo, para multiplicar), basta con pasarlo como 2º argumento:

const costo1 = ensureNumber( document.getElementById( 'tiempo1' ).value, 1 );
1
  • 2
    si me funciona cumple lo que necesito, tenia en mente hacer algo similar a lo que me compartes, pero de otra forma, iba a ser muy extenso y tampoco sabia si funcionaria, lo que me respondiste esta preciso. GRACIAS.
    – DAD
    el 21 abr. 2020 a las 21:47

Tu Respuesta

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

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