基於jQuery的輸入獲取平均值

Question

我試圖從輸入中獲取平均值。

我有5個輸入字段。我想要做這樣的事情：

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

例如：

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

平均是基於多少用戶輸入文本字段。這是我到目前爲止所嘗試的。請檢查一下。

用下面的腳本。我唯一能總結，我不能爲我的英語不好做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>

遺憾。

參考：https://stackoverflow.com/a/14899614/6354277

Answer 1

遍歷輸入字段，添加其是與該增量計數沿非空值。

$(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>