Reputation: 45
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
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));
}
})
});
Upvotes: 3