Chee
Chee

Reputation: 45

Average each of the column table in javascript

I have this script that made me stuck for two days.My aim is to get the average of the column.My problem is in accessing the consecutive rows and put the average in the last row in each column.

-HTML-

<table class="table" id="preview">
                                <thead>
                                    <tr>
                                        <th colspan="6">
                                            <h3>School Name : 
                                                <select name="school_id" class="form-control">
                                                    <option value="">Select School</option>
                                                    @foreach($location_name as $schools)
                                                    <optgroup label="{!! $schools->location_name !!}">
                                                        @foreach($schools['schoollocation'] as $scho)
                                                        <option value="{!! $scho->school_id !!}"@if($update_card->school_id == $scho->school_id)selected="selected" @endif>{!! $scho->school_name !!}</option>
                                                        @endforeach
                                                    </optgroup>
                                                    @endforeach
                                                </select>
                                            </h3>
                                        </th>
                                        <th colspan="3">
                                            <h3>Grade Level : 
                                                {!! Form::select('scholar_grade_level', [
                                                ''=>'Choose a Year Level',
                                                '7' => 'Grade-7',
                                                '8' => 'Grade-8',
                                                '9' => 'Grade-9',
                                                '10' => 'Grade-10'
                                                ],$update_card->scholar_grade_level,['class'=>'form-control']) !!}
                                            </h3>
                                        </th>
                                        <th colspan="3">
                                            <h3>School Year : 
                                                <select class="form-control" name="scholar_school_year">
                                                    <?php 
                                                    $null = 'null';
                                                    $choose = 'Choose A Year';
                                                    $Present = 'Present';
                                                    echo '<option value='.$null.'>' .$choose.'</option>';
                                                    if ($update_card->scholar_school_year ==  'Present' ) {
                                                        echo '<option value="Present" selected="selected">' .$Present.'</option>';
                                                    }else{
                                                        echo '<option value="Present">' .$Present.'</option>';
                                                    }
                                                    for($i=date('Y');  $i > date('Y')-30; $i--){

                                                        $x = $i +1;
                                                        $y = $i;
                                                        $pass = $y.'-'.$x;
                                                        if ($update_card->scholar_school_year ==  $pass ) {
                                                            echo '<option value='.$y.'-'.$x.' selected="selected">'.$y.'-'.$x.'</option>';
                                                        }else{
                                                            echo '<option value='.$y.'-'.$x.'>'.$y.'-'.$x.'</option>';
                                                        }
                                                    }
                                                    ?>
                                                </select>                                           
                                            </h3>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th colspan="12"><h4>SCHOLASTIC ACHIEVEMENT</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>

                                    </tr>
                                </thead>   
                                <tbody>
                                    @foreach($update_card['AllGrade'] as $subject)
                                    {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
                                    <tr>
                                        <td colspan="3">{!! $subject->subject !!}</td> 
                                        <td colspan="2" class="s"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only" id="s1"></td>
                                        <td colspan="2" class="s"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only" id="s2"></td>
                                        <td colspan="2" class="s"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only" id="s3"></td>
                                        <td colspan="2" class="s"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only" id="s4"></td>

                                    </tr>
                                    @endforeach
                                    <tr>
                                        <th colspan="3">Average:</th>
                                        <td colspan="2" class="s"><input type="text" name="" value="" class="form-control" id="ss"></td>
                                        <td colspan="2" class="s"><input type="text" name="" value="" class="form-control" id="ss"></td>
                                        <td colspan="2" class="s"><input type="text" name="" value="" class="form-control" id="ss"></td>
                                        <td colspan="2" class="s"><input type="text" name="" value="" class="form-control" id="ss"></td>
                                    </tr>
                                </tbody>
                                <thead>
                                    <tr>
                                        <th colspan="3">Upload Card(Proof Grade) :</th>
                                        @foreach($update_card['CardProof'] as $subject1)
                                        {!! Form::hidden('card_proof_id',$subject1->card_proof_id) !!} 
                                        <th colspan="2">
                                            {!! Form::file('card_proof_1') !!}
                                        </th> 
                                        <th colspan="2">
                                            {!! Form::file('card_proof_2') !!}
                                        </th> 
                                        <th colspan="2">
                                            {!! Form::file('card_proof_3') !!}
                                        </th> 
                                        <th colspan="2">
                                            {!! Form::file('card_proof_4') !!}
                                        </th> 
                                        @endforeach
                                    </tr>
                                </thead>
                            </table>

-Javascript-

This is what I have now...

var total = 0;
$('table#preview td.s').each(function()
{
    var input1 = document.getElementById("s1").value;  
    var input2 = document.getElementById("s2").value; 
    var input3 = document.getElementById("s3").value; 
    var input4 = document.getElementById("s4").value; 

    var score = parseInt($(this).text());
    alert(input1);


    if (!isNaN(score))
    {
        total += score;
    }
});

alert('The total is: ' + total);

Desired output

Subject | Term1 | Term2 | Term3 | Term4  
   Math      81      87      81      80    
Science      89      83      81      80
Average |    85 |    85 |    81 |    80

Upvotes: 1

Views: 727

Answers (1)

suman
suman

Reputation: 728

   <table>
  <thead>
        <th>Subject</th>
        <th>Term1</th>
        <th>Term2</th>
        <th>Term3</th>
        <th>Term4</th>  
  </thead>
  <tbody>
     <tr>
       <td><input type="text" value="Math"></td>
       <td><input type="text" value="81"></td>
       <td><input type="text" value="87"></td>
       <td><input type="text" value="81"></td>
       <td><input type="text" value="80"></td>
     </tr>
     <tr>
       <td><input type="text" value="SCEINCE"></td>
       <td><input type="text" value="89"></td>
       <td><input type="text" value="83"></td>
       <td><input type="text" value="81"></td>
       <td><input type="text" value="80"></td>
     </tr>
     <tr id="average">
       <td>Aerage</td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
  </tbody> 
</table>



 $(document).ready(function(){

     $("#average td").each(function(k,v){
       debugger;
          if(k>0){
          $sum=0;
          $row = $(this).closest("table").find("tr");    
          $($row).each(function(key,val){
            if(key>0 && key<$row.length-1){
              $sum+=parseInt($($(this).find("input")[k]).val());      
            }
          })

          $(this).text($sum/($row.length-2));
          }

     })

    });

check the fiddle here

Upvotes: 3

Related Questions