获取javascript中的总和和平均值
如何得到最后一列的总和和平均值。在我的代码中，如果表有一行，两行和三行，它将不会得到正确的值。这只适用于有4行的表。我知道我的代码有问题但是我无法弄清楚循环是如何工作的.each函数。
重要说明：这与keyup事件一起运行以更新表数据。它不仅仅是一个显示器。确切地说，它是一个更新表单。
期望的输出
Item | value1 | value 2 | value3 |value 4 | Average 01 90 88 87 80 82.25 Total average 82.25 result of 82.25/1 number of row if two rows Item | value1 | value 2 | value3 |value 4 | Average 01 90 88 87 80 82.25 02 80 85 86 84 83.75 Total average 83 result of (82.25+83.75)/2 number of rows 但结果出现了多个循环
Here is the console.log(totalAverage) 86.25 176 264.75 353.5 442.25 86.25 176 264.75 353.5 442.25
问题：如何抑制或跳过这些不必要的值。我只需要86.25来显示总数。注意：这只是现在的单行并且已经遇到了这种错误，如果表有多行那么多少呢？
HTML
Card
Subjects First Grading Second Grading Third Grading Fourth Grading Average @foreach($update_card['AllGrade'] as $subject) {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} {!! $subject->subject !!} {!! Form::text('term_1[]',$subject->term_1,['class'=>'form-control','name[]'=>'term_1','id[]'=>'term_1','value'=>'0']) !!} {!! Form::text('term_2[]',$subject->term_2,['class'=>'form-control','name[]'=>'term_2','id[]'=>'term_2','value'=>'0']) !!} {!! Form::text('term_3[]',$subject->term_3,['class'=>'form-control','name[]'=>'term_3','id[]'=>'term_4','value'=>'0']) !!} {!! Form::text('term_4[]',$subject->term_4,['class'=>'form-control','name[]'=>'term_4','id[]'=>'term_4','value'=>'0']) !!} Average @endforeach Total Average: {!! Form::text('scholar_GPA',$update_card->scholar_GPA,['class'=>'form-control total-ave','name' => 'total-ave','id' => 'total-ave','value' => '0']) !!}
Javascript代码段
$("input").on("keyup", function(){ $("tbody tr").each(function() { var col=1; var tr =1; var t = 0; var a = 0; $(this).children('td').not(':last').each(function () { var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val(); // console.log(number); // console.log(col); t += parseInt(number); // console.log(t); a = t/col; col++; }); $(this).children('td').last().html(a);//last td of the row // console.log(a); col=1; tr++; }); calcTotalave(); }); // calculate total average function calcTotalave() { var totalAve = 0; var tot=0; var c = 2; var count =0; $( ".average" ).each(function() { // console.log($(this).html()); var thisAve = parseFloat($(this).html()); if(!thisAve || thisAve === NaN || thisAve == "") { thisAve = 0; } totalAve += thisAve; //alert('count'+thisAve+totalAve); console.log(totalAve); count++; }); c++; totalAve = totalAve/c; // console.log(totalAve); $("#total-ave").val(totalAve); }
更新 ：在下面添加注释，按空格键运行，基于以下function。 小提琴是循环遍历并按行计算单元格，因此不需要.average类。 您需要根据数据库输出调整html表格布局。
calcTotalave(); }); // calculate total average function calcTotalave() { var totalAve = 0; $( ".average" ).each(function() { var thisAve = parseFloat($(this).text()) || 0; // always return a number totalAve += thisAve; }); var Aver = totalAve / $('.average').length; console.log(totalAve); $("#total-ave").text(Aver); }
而不是将每个单元格分类为.average您可以使用选择器来定位给定行的所有单元格td ：
$('input').change(function() { calTotalAverages(); // the magic and collect the total average }); function calTotalAverages(){ var SumAve = 0, nums = 0; // to collect total averages and the number of rows $('tr').each(function(i) { if (i > 0) { // ignore the first row var $this = $(this); SumAve += calcRowAve($this); // add up the returned averages and run the function nums ++; // count the rows } }); // cycle through each row var sum = (SumAve / nums); $('#total-ave').text(sum.toFixed(2)); // display the total average return sum; // return the total average } // calculate total average function calcRowAve(targetRow) { var totalAve = 0, targetCells = targetRow.children(), targLength = targetCells.length - 2; // total number of values in a row targetCells.each(function(i) { if (i > 0 && i <= targLength) { var thisAve = parseFloat($('input',this).val()) || parseFloat($(this).text()) || 0; // always return a number totalAve += thisAve; } // check to ignore the first cell and the last }); var Aver = totalAve / targLength; // get the average targetCells.last().text(Aver); // update the last cell of the row return Aver; // return the average for this row }
#total-ave { position: fixed; right: 2em; top: 8em; } input{ width: 5em; }
item 1 value 1 value 2 value 3 value 4 average 1 90 88 87 80 2 80 85 86 84 3