Get Durchschnitt basierend auf Eingabe mit Jquery

Question

Ich versuche, Durchschnitt von einer Eingabe zu bekommen.

Ich habe 5 Eingabefelder. Ich möchte so etwas tun:

n = total of inputed field (has value) 
total = n1 + n2 + ... + n5/n 

Zum Beispiel:

1 + 2 + 3/3 
1 + 2 + 3 + 4/4 
1 + 2 + 3 + 4 + 5/5 

Die durchschnittliche basiert auf wie viel Benutzereingabe das Textfeld ein. Hier ist, was ich bisher versucht habe. Überprüfen Sie bitte das.

Mit meinem Skript unten. Ich nur in der Lage zu fassen, und ich kann die average

$(document).ready(function() { 
 
    $(document).on("change", ".kd1", function() { 
 
    $('table tr').each(function() { 
 
     var valid_labels = 0; 
 
     var newval = 0; 
 
     var total = $('.kd1', this).get().reduce(function(sum, elem) { 
 
     return sum + +$(elem).val(); 
 
     }, 0) 
 
     if (!isNaN(total)) { 
 
     valid_labels += 1; 
 
     newval += total; 
 
     } 
 
     $('.result1', this).val(newval/valid_labels); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tr> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='result1'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='kd1'></td> 
 
    <td><input type='text' size='5' class='result1'></td> 
 
    </tr> 
 
</table>

sorry für mein schlechtes Englisch nicht.

Referenz: https://stackoverflow.com/a/14899614/6354277

Answer 1

Iterate über Eingabefelder, Werte hinzufügen, die zusammen mit dieser Erhöhung der Zählung nicht leer sind.

$(document).ready(function() { 
 
    $(document).on("input", ".kd1", function() { 
 
    $('table tr').each(function() { 
 
     // variables for holding total and count 
 
     var total = 0, 
 
     count = 0; 
 

 
     // get all input fields and iterate over them 
 
     $('.kd1', this).each(function() { 
 
     // check the value is non-empty 
 
     if (this.value.trim() != '') { 
 
      // increment count for calculating average 
 
      count++; 
 
      // update total based on input value 
 
      // treat input value as 0 if number parsing produces NaN 
 
      total += (Number(this.value.trim()) || 0); 
 
     } 
 
     }); 
 
     // calculate and update the average although treat as zero if NaN 
 
     $('.result1', this).val(total/count || 0); 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tr> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='result1'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='kd1'> 
 
    </td> 
 
    <td> 
 
     <input type='text' size='5' class='result1'> 
 
    </td> 
 
    </tr> 
 
</table>