我已经制作了一张水平使用的平均计算表 的JavaScript
示例：
Subject | Term1 | Term2 | Term3 | Term4 | Ave
Math 81 87 81 80 82.4
Science 89 83 81 80 83.25
但我意识到它应该是这样......
所需表：
Subject | Term1 | Term2 | Term3 | Term4
Math 81 87 81 80
Science 89 83 81 80
Average | 85 | 85 | 81 | 80
在第一个表格中，我发现在td标签上循环有点容易 添加它的价值。但现在我不知道如何计算 逐列平均值。所以我现在的问题是JavaScript部分。
HTML
<tr>
<th colspan="3">Learning Areas</th>
<th colspan="2">Term 1</th>
<th colspan="2">Term 2</th>
<th colspan="2">Term 3</th>
<th colspan="2">Term 4</th>
<th>Ave</th>
</tr>
</thead>
<tbody>
@foreach($card['AllGrade'] as $subject)
{!! Form::hidden('grade_id[]',$subject['grade_id']) !!}
<tr>
<td colspan="3">{!! $subject->subject !!}</td>
<td colspan="2"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only"></td>
</tr>
@endforeach
<tr>
<td colspan="2">Average Grade :</td>
<td id="t1" value="">term1</td>
<td id="t2" value="">term2</td>
<td id="t3" value=">term3</td>
<td id="t4" value=">term4</td>
</tr>
完成view.blade.php
@extends('layout.Master')
@section('content')
@include('errors.input_error')
{!!Html::style('assets/css/tag/bootstrap-tagsinput.css')!!}
{!!Html::style('assets/css/tag/app.css')!!}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@if($update_card->scholar_grade_level == 'Graduated_Secondary')
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="panel panel-default">
<div class="panel-heading"><h3>Update Card Information</h3></div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">
{!! Form::open(array('url'=>'Update-Card-Information/'.$update_card->scholar_card_id,'files'=>true)) !!}
{!! Form::hidden('scholar_id',$update_card->scholar_id) !!}
{!! Form::hidden('scholar_grade_level',$update_card->scholar_grade_level) !!}
<div class="col-lg-12">
<div class="form-group">
<label class="control-label">Name of School :</label>
<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>
</div>
<div class="form-group">
<label class="control-label">School year :</label>
<div class="form-group">
<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>
</div>
<div class=" form-group">
<label class="control-label">Awards and Recognation:</label>
{!! Form::text('scholar_awards',$update_card->scholar_awards,['class'=>'form-control','data-role'=>'tagsinput'])!!}
</div>
<div class="pull-right">
{!!Form::submit('Update Card',['class'=>'btn btn-lg btn-primary btn-block']) !!}
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@if($update_card->scholar_grade_level >= 7 && $update_card->scholar_grade_level <= 10 && $update_card->scholar_school_year == 'Present' && $update_card->scholar_grade_level != 'Graduated_Primary' && $update_card->scholar_grade_level != 'Graduated_Secondary' && $update_card->scholar_grade_level != 'Graduated_Senior')
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="panel panel-default">
<div class="panel-heading"><h3>Update Card Information</h3></div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">
{!! Form::open(array('url'=>'Update-Card-Information/'.$update_card->scholar_card_id,'files'=>true)) !!}
{!! Form::hidden('scholar_id',$update_card->scholar_id) !!}
<div class="col-lg-12">
<div class="form-group">
<label class="control-label">Name of School :</label>
<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>
</div>
<div class="form-group">
<label class="control-label">School year :</label>
<div class="form-group">
<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>
</div>
</div>
<div class="form-group">
<label class="control-label">Grade Level : </label>
{!! 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']) !!}
</div>
<div class="form-group">
<label class="control-label">Average grade : </label>
{!! Form::text('scholar_GPA',$update_card->scholar_GPA,['class'=>'form-control']) !!}
</div>
@if($update_card->scholar_grade_level == 10)
<div class="form-group">
<label class="control-label">Choose Track(For Senior High) : </label>
{!! Form::select('senior_track_id', ['' => 'Choose A Senior High Track'] + $seniors, $update_card->scholar_track , ['class' => 'form-control']) !!}
</div>
@endif
<div class=" form-group">
<label class="control-label">Awards and Recognation:</label>
{!! Form::text('scholar_awards',$update_card->scholar_awards,['class'=>'form-control','data-role'=>'tagsinput'])!!}
</div>
<div class=" form-group">
<label class="control-label">Upload Card(Proof Grade) :</label>
@foreach($update_card['CardProof'] as $subject1)
{!! Form::hidden('card_proof_id',$subject1->card_proof_id) !!}
{!! Form::file('card_proof_5') !!}
@endforeach
</div>
<div class="pull-right">
{!!Form::submit('Update Card',['class'=>'btn btn-lg btn-primary btn-block']) !!}
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@if($update_card->scholar_grade_level >= 7 && $update_card->scholar_grade_level <= 10 && $update_card->scholar_school_year != 'Present' && $update_card->scholar_grade_level != 'Graduated_Primary' && $update_card->scholar_grade_level != 'Graduated_Secondary' && $update_card->scholar_grade_level != 'Graduated_Senior')
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><h3>Update Card Information</h3></div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">
{!! Form::open(array('url'=>'Update-Card-Information/'.$update_card->scholar_card_id,'files'=>true)) !!}
{!! Form::hidden('scholar_id',$update_card->scholar_id) !!}
此特定表单的表格开头
<div class="table table-responsive table-bordered">
<table class="table">
<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"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only"></td>
<td colspan="2"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only"></td>
</tr>
@endforeach
<tr>
<td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</td> <td colspan="2">0</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>
</div>
<div class="col-lg-6 form-group">
<label class="control-label">Awards and Recognation:</label>
{!! Form::text('scholar_awards',$update_card->scholar_awards,['class'=>'form-control','data-role'=>'tagsinput'])!!}
</div>
@if($update_card->scholar_grade_level == 10)
<div class="col-lg-6 form-group">
<label class="control-label">Choose Track(For Senior High) : </label>
{!! Form::select('senior_track_id', ['' => 'Choose A Senior High Track'] + $seniors, $update_card->scholar_track , ['class' => 'form-control']) !!}
</div>
@endif
<div class="col-lg-12"></div>
<div class="col-lg-6 pull-right">
{!!Form::submit('Update Card',['class'=>'btn btn-lg btn-primary btn-block']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
</div>
@endif
脚本
$("input").on("keyup", function() {
$("tbody tr").each(function() {
$(this).children('td').not(':first').each(function() {
});
});
答案 0 :(得分：1)
尝试此解决方案，如果您有任何疑问，请告诉我：
$("input").on("keyup", function() {
$("tbody tr").each(function(index) {
var sum = 0; // The summation of all terms.
var card = 0; // Number of cells.
$(this).children('td').not(':first').each(function(i, e) {
card++;
sum+= parseInt(e.text().trim());
});
var avg = sum/card;
$("#average td:nth-of-type("+index+")").html(avg);
});
});