使用Keyup事件计算JavaScript中的总平均值 [英] Calculating total average in javascript with keyup event
本文介绍了使用Keyup事件计算JavaScript中的总平均值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的应用程序中缺少使用laravel计算总平均值的功能.由于它需要JavaScript，因此我遇到了麻烦，现在将foreach简化为该静态值，但是由于我具有 average 的脚本，所以现在我需要一个 total average的函数.
I have a lacking function in my app using laravel that calculates the total average. Since it needs javascript, I had trouble with and now simplied the table with foreach before into this static values but since I have script for average, now I need a the function for total average.
希望所有人都可以帮助我完成我的工作.预先谢谢你.
Hope all could assist me with what I've started. Thank you in advance.
$("input").on("keyup", function() {
$("tbody tr").each(function() {
var col = 1;
var tr = 1;
var t = 0;
var a = 0;
$(this).children('td').not(':first').not(':last').each(function() {
var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();
t += parseInt(number);
a = t / col;
col++;
});
$(this).children('td').last().html(a);
col = 1;
tr++;
});
//getTotalave();
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Grade</th>
<th>score 1</th>
<th>score 2</th>
<th>score 3</th>
<th>score 4</th>
<th>average</th>
</tr>
</thead>
<tbody>
<tr>
<td>student1</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="81"></td>
<td class="ave" value="0">84</td>
</tr>
<tr>
<td>student2</td>
<td><input type="text" id="s1" value="88"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="85"></td>
<td class="ave" value="0">84.25</td>
</tr>
<tr>
<td>student3</td>
<td><input type="text" id="s1" value="86"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="87"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">87.25</td>
</tr>
<tr>
<td>student4</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="89"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">86</td>
</tr>
<tr>
<th>Total Average</th>
<td class="tave" value="">85.375</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
使用唯一的类名作为总数:
using a unique class name for the total:
$("input").on("keyup", function() {
var tAv = 0,
tRo = 0;
$("tbody tr").not(':last').each(function() {
var col = 0,
t = 0; // starting counters
tRo++;
$(this).children('td').not(':first').not(':last').each(function() {
t += parseFloat($('input', this).val()) || 0;
col++;
});
var rAv = t / col; // row average
tAv += rAv; // increment average
$('td', this).last().text(rAv.toFixed(2)); // row average display
});
$('.tave').text((tAv / tRo).toFixed(2)); // final average
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Grade</th>
<th>score 1</th>
<th>score 2</th>
<th>score 3</th>
<th>score 4</th>
<th>average</th>
</tr>
</thead>
<tbody>
<tr>
<td>student1</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="81"></td>
<td class="ave" value="0">84</td>
</tr>
<tr>
<td>student2</td>
<td><input type="text" id="s1" value="88"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="85"></td>
<td class="ave" value="0">84.25</td>
</tr>
<tr>
<td>student3</td>
<td><input type="text" id="s1" value="86"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="87"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">87.25</td>
</tr>
<tr>
<td>student4</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="89"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">86</td>
</tr>
<tr>
<th>Total Average</th>
<td class="tave" value="">85.375</td>
</tr>
</tbody>
</table>
</body>
</html>
这篇关于使用Keyup事件计算JavaScript中的总平均值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
