1

Tengo una tabla de 10 filas, en la cual se deben ingresar valores numéricos, y calcular la suma, promedio, valor máximo y mínimo. La idea es que se vayan calculando a medida que se va digitando (keyup). Los input pueden quedar sin datos si es necesario. La suma ya la tengo.

Esta es mi tabla

<table>
    <thead>
        <th>N° Muestra</th>
        <th>Peso LLenado</th>
    </thead>
    <tbody>
        <?php for ($i=1; $i<11 ; $i++) { ?>
            <tr>
                <td><span id="<?='s'.$i?>"><?=$i?></span></td>
                <td><input type="number" min="0" name="pLLen[]" class="llen"></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

Y la suma

$('.llen').keyup(function(){
    var sum = 0;
    $('.llen').each(
    function(index, value){
        if ($.isNumeric($(this).val())){
            sum = sum + eval($(this).val());
        }
    });
    $('#total').val(sum);    
});
2
  • 1
    Y en donde te sale error ? o cual es la dificultad que presentas ? Commented el 27 dic. 2019 a las 14:42
  • No se como hacerlo, le he dado varias vueltas pero no se ocurre como hacerlo
    – ddiaz
    Commented el 27 dic. 2019 a las 14:52

1 respuesta 1

4

Aquí tienes. Te explico:

Debajo de la tabla donde capturamos los resultados he creado otra tabla a modo de resumen donde verás los resultados de una forma más clara.

<table>
    <thead>
        <th>N° Muestra</th>
        <th>Peso LLenado</th>
    </thead>
    <tbody>
        <?php for ($i=1; $i<11 ; $i++) { ?>
            <tr>
                <td><span id="<?='s'.$i?>"><?=$i?></span></td>
                <td><input type="number" min="0" name="pLLen[]" class="llen"></td>
            </tr>
        <?php } ?>
    </tbody>
</table>
<br>
<table>
    <thead>
        <th>Resumen</th>
    </thead>
    <tbody>
        <tr>
            <td>Valor Promédio</td>
            <td>Valor Mínimo</td>
            <td>Valor Máximo</td>
        </tr>
        <tr>
            <td><input type="number" id="promedio" min="0" name="promedio"></td>
            <td><input type="number" id="minimo" min="0" name="minimo"></td>
            <td><input type="number" id="maximo" min="0" name="maximo"></td>
        </tr>
</table>

Y la función de JS, el planteamiento ya estaba avanzado, pero faltaba pulir un par de cosas. He creado las variables "contador", "promedio", "min" y "max" para poder hacer los cálculos.

Promedio: Sumar los valores que hay introducidos y dividirlos entre el total que hay Máximo: Controlar que el valor que estamos evaluando es mayor que el que tenemos en la variable. Si es así, se sobreescribe. En caso contrario, no. Mínimo: Controlar que el valor que estamos evaluando es menor que el que tenemos en la variable. Si es así, se sobreescribe. En caso contrario, no.

Una vez están todos calculados, los mostramos en los inputs de la tabla resumen.

$('.llen').keyup(function(){
    var sum = 0;
    var contador = 0;
    var promedio = 0;
    var min = 999999;
    var max = 0;
    $('.llen').each(
        function(index, value){
            if ($.isNumeric($(this).val())){
                sum = sum + eval($(this).val());
                contador = contador+1;
                promedio = sum / contador;

                if (eval($(this).val())<min){
                    min = eval($(this).val());
                }

                if (eval($(this).val())>max){
                    max = eval($(this).val());
                }
            }
        }
    );
    $('#promedio').val(promedio);
    $('#minimo').val(min);    
    $('#maximo').val(max);
});
5
  • Pues ya está explicado. Commented el 27 dic. 2019 a las 15:39
  • Gracias ferran muñoz, era lo que buscaba, pero el minimo siempre me da 0
    – ddiaz
    Commented el 27 dic. 2019 a las 15:43
  • Si, lo estoy intentando corregir. Si edito con la corrección te lo hago saber :) Commented el 27 dic. 2019 a las 15:43
  • 1
    Corregido ddiaz. Commented el 27 dic. 2019 a las 15:48
  • Excelente, muchísimas gracias!
    – ddiaz
    Commented el 27 dic. 2019 a las 15:50

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.