在JavaScript中获取总和和平均值

Question

How to get the sum and average of the last column.In my code it wont get the correct value if the table has one,two and three rows.This works only on table with 4 rows.I know something wrong with my code but i cant figure it out how the loop works within .each function.

Important note:this runs with keyup event to update table data.Its not just a display.To be exact it is an update form.

Desired output

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

But the result comes out with multiple loops

Here is the console.log(totalAverage)
86.25
176
264.75
353.5
442.25
86.25
176
264.75
353.5
442.25

Problem:How to suppress or skip this unnecessary values.I only need the 86.25 to display in total-ave.Note: this is only single row right now and have already incountered this miscaculation, how much more if the table has multiple rows then?

Html

<tr>
 <th colspan="12"><h4>Card</h4></th>
 </tr>
 <tr>
  <th colspan="3">Subjects</th>
  <th colspan="2">First Grading</th>
 <th colspan="2">Second Grading</th>
  <th colspan="2">Third Grading</th>
  <th colspan="2">Fourth Grading</th>
  <th>Average</th>
  </tr>
   </thead>   
  <tbody>
 @foreach($update_card['AllGrade'] as $subject)
   {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
<tr>
 <th colspan="3">{!! $subject->subject !!}</th>
 <td colspan="2">{!! Form::text('term_1[]',$subject->term_1,['class'=>'form-control','name[]'=>'term_1','id[]'=>'term_1','value'=>'0']) !!}</td>
 <td colspan="2">{!! Form::text('term_2[]',$subject->term_2,['class'=>'form-control','name[]'=>'term_2','id[]'=>'term_2','value'=>'0']) !!}</td>
<td colspan="2">{!! Form::text('term_3[]',$subject->term_3,['class'=>'form-control','name[]'=>'term_3','id[]'=>'term_4','value'=>'0']) !!}</td>
 <td colspan="2">{!! Form::text('term_4[]',$subject->term_4,['class'=>'form-control','name[]'=>'term_4','id[]'=>'term_4','value'=>'0']) !!}</td>
 <td colspan="2" class="average" id="average" value="0"> Average</td>
 </tr>
 @endforeach
 <tr>
 <th colspan="11">Total Average:</th>
   <th>{!! Form::text('scholar_GPA',$update_card->scholar_GPA,['class'=>'form-control total-ave','name' => 'total-ave','id' => 'total-ave','value' => '0']) !!}</th>
 </tr>

Javascript snippet

$("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);


        }

Answer 1

UPDATED : fiddle below with comments, press space-bar to run, based around the below function. the fiddle is made to cycle through and calc cells by row, so no .average class required. You will need to adapt it for your html table layouts as per your database output.

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);    
    }

instead of classing each cell as .average you could use the selector to target all the cells td of a given row:

 $('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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>item 1</th> <th>value 1</th> <th>value 2</th> <th>value 3</th> <th>value 4</th> <th>average</th> </tr> <tr> <td>1</td> <td>90</td> <td>88</td> <td>87</td> <td>80</td> <td></td> </tr> <tr> <td>2</td> <td>80</td> <td>85</td> <td>86</td> <td>84</td> <td></td> </tr> <tr> <td>3</td> <td><input type='number'></td> <td><input type='number'></td> <td><input type='number'></td> <td><input type='number'></td> <td></td> </tr> </table> <div id='total-ave'></div>