无法使用脚本自动填充PHP MYSQL动态表（文本字段）中的值
问题描述：
I have a table which containing details of students and option for inputting marks of the students. The students details is fetching from MySQL DB. I am trying to populate total marks, percentage and grade based on the inputting marks. I able to do the calculations only for the first row. The auto population of total marks, percentage and grade is not happening from the 2nd row. Table structure and script is given below. Attaching the screen shot of my table also provided. In the screen shot the read only fields are auto populating using script. Please help.
HTML table Structure
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
<center>
Srl#
</center>
</th>
<th>
<center>
ID
</center>
</th>
<th>
<center>
Student Name
</center>
</th>
<th width="8%">
<center>
Unit Test
</center>
</th>
<th colspan="4">
<center>
Individual Activity
</center>
</th>
<th width="6%">
<center>
Total
</center>
</th>
<th colspan="4">
<center>
Group Activity
</center>
</th>
<th width="6%">
<center>
Total
</center>
</th>
<th width="9%">
<center>
Grand Total
</center>
</th>
<th>
<center>
%
</center>
</th>
<th>
<center>
Grade
</center>
</th>
</tr>
</thead>
<tbody>
<?php
if (isset($_POST['stmkadls'])) {
$stcl = $_POST['stcls'];
$stdv = $_POST['stdv'];
$sql = "select gps_div_id as dvid,gps_st_uid as stuid,gps_st_name as stnm,gps_st_class as stcl,gps_st_division as stdv from gps_stdnt_class_div_xref where gps_st_class = '$stcl' and gps_st_division = '$stdv' and gps_st_div_stat = 'Y' order by gps_st_name";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
if (mysqli_num_rows($result) > 0)
$no = 1;
while ($row = mysqli_fetch_array($result)) {
$dvid = $row['dvid'];
$stuid = $row['stuid'];
$stnm = $row['stnm'];
$stcl = $row['stcl'];
$stdv = $row['stdv'];
?>
<tr>
<td class="highlight">
<div class="success">
<a href="javascript:;">
<?php echo $no ?> </a>
</div>
</td>
<td>
<?php echo $stuid ?>
</td>
<td>
<?php echo $stnm ?>
</td>
<td>
<input type="number" name="utst" id="utst" class="form-control form-filter">
</td>
<td>
<input type="text" name="iam1" id="iam1" class="form-control form-filter" onkeyup="sum();" required>
</td>
<td>
<input type="text" name="iam2" id="iam2" class="form-control form-filter" onkeyup="sum();" required >
</td>
<td>
<input type="text" name="iam3" id="iam3" class="form-control form-filter" onkeyup="sum();" required >
</td>
<td>
<input type="text" name="iam4" id="iam4" class="form-control form-filter" onkeyup="sum();" required >
</td>
<td>
<input type="text" name="iamtot" id="iamtot" class="form-control form-filter" readonly >
</td>
<td>
<input type="text" name="gam1" id="gam1" class="form-control form-filter" onkeyup="sum();" required>
</td>
<td>
<input type="text" name="gam2" id="gam2" class="form-control form-filter" onkeyup="sum();" required>
</td>
<td>
<input type="text" name="gam3" id="gam3" class="form-control form-filter" onkeyup="sum();" required>
</td>
<td>
<input type="text" name="gam4" id="gam4" class="form-control form-filter" onkeyup="sum();" required>
</td>
<td>
<input type="text" name="gamtot" id="gamtot" class="form-control form-filter" readonly >
</td>
<td>
<span class="center">
<input type="text" name="grntot" id="grntot" class="form-control form-filter" readonly >
</span>
</td>
<td>
<input type="text" name="percent" id="percent" class="form-control form-filter" readonly >
</td>
<td>
<input type="text" name="grade" id="grade" class="form-control form-filter" readonly >
</td>
<?php $no++; ?>
</tr>
<?php
}
}
?>
</tbody>
</table>
Script used for calculating total and percentage.
<script>
function sum() {
var Iam1 = document.getElementById('iam1').value;
if (Iam1=='')
Iam1 = parseInt('0');
var Iam2 = document.getElementById('iam2').value;
if (Iam2=='')
Iam2 = parseInt('0');
var Iam3 = document.getElementById('iam3').value;
if (Iam3=='')
Iam3 = parseInt('0');
var Iam4 = document.getElementById('iam4').value;
if (Iam4=='')
Iam4 = parseInt('0');
var iamtot = parseInt(Iam1) + parseInt(Iam2) + parseInt(Iam3) + parseInt(Iam4);
document.getElementById('iamtot').value = iamtot;
var Gam1 = document.getElementById('gam1').value;
if (Gam1=='')
Gam1 = parseInt('0');
var Gam2 = document.getElementById('gam2').value;
if (Gam2=='')
Gam2 = parseInt('0');
var Gam3 = document.getElementById('gam3').value;
if (Gam3=='')
Gam3 = parseInt('0');
var Gam4 = document.getElementById('gam4').value;
if (Gam4=='')
Gam4 = parseInt('0');
var gamtot = parseInt(Gam1) + parseInt(Gam2) + parseInt(Gam3) + parseInt(Gam4);
document.getElementById('gamtot').value = gamtot;
var UtSt = document.getElementById('utst').value;
if (UtSt=='')
UtSt = parseInt('0');
var max = Math.max(iamtot,gamtot);
var grt = (parseInt(max) + parseInt(UtSt))/2;
var grt = grt.toFixed(2);
document.getElementById('grntot').value = grt;
var per = (parseInt(grt)/20)*100;
document.getElementById('percent').value = per;
var Grade;
if( parseInt(per) >= 90 ){
Grade = "A1";
}
else if( parseInt(per) >= 80 ){
Grade = "A2";
}
else if( parseInt(per) >= 70 ){
Grade = "B1";
}
else if( parseInt(per) >= 60 ){
Grade = "B2";
}
else if( parseInt(per) >= 50 ){
Grade = "C1";
}
else if( parseInt(per) >= 40 ){
Grade = "C2";
}
else if( parseInt(per) >= 33 ){
Grade = "D";
}
else if( parseInt(per) >= 21 ){
Grade = "E1";
}
else {
Grade = "E2";
}
document.getElementById('grade').value = Grade;
}
</script>
答
With the help of hint given by Sean, i have made changes to makes the ID's unique in above my code. It's working as expected. Attaching both HTML code and Script.
Modified HTML table structure.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
<center>
Srl#
</center>
</th>
<th>
<center>
ID
</center>
</th>
<th>
<center>
Student Name
</center>
</th>
<th width="8%">
<center>
Unit Test
</center>
</th>
<th colspan="4">
<center>
Individual Activity
</center>
</th>
<th width="6%">
<center>
Total
</center>
</th>
<th colspan="4">
<center>
Group Activity
</center>
</th>
<th width="6%">
<center>
Total
</center>
</th>
<th width="9%">
<center>
Grand Total
</center>
</th>
<th>
<center>
%
</center>
</th>
<th>
<center>
Grade
</center>
</th>
</tr>
</thead>
<tbody>
<?php
if (isset($_POST['stmkadls'])) {
$stcl = $_POST['stcls'];
$stdv = $_POST['stdv'];
$sql = "select gps_div_id as dvid,gps_st_uid as stuid,gps_st_name as stnm,gps_st_class as stcl,gps_st_division as stdv from gps_stdnt_class_div_xref where gps_st_class = '$stcl' and gps_st_division = '$stdv' and gps_st_div_stat = 'Y' order by gps_st_name";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
if (mysqli_num_rows($result) > 0)
$no = 1;
while ($row = mysqli_fetch_array($result)) {
$dvid = $row['dvid'];
$stuid = $row['stuid'];
$stnm = $row['stnm'];
$stcl = $row['stcl'];
$stdv = $row['stdv'];
?>
<tr>
<td class="highlight">
<div class="success">
<a href="javascript:;">
<?php echo $no ?> </a>
</div>
</td>
<td>
<?php echo $stuid ?>
</td>
<td>
<?php echo $stnm ?>
</td>
<td>
<input type="number" name="utst" id="utst<?php echo $no ?>" class="form-control form-filter">
</td>
<td>
<input type="text" name="iam1" id="iam1<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
</td>
<td>
<input type="text" name="iam2" id="iam2<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
</td>
<td>
<input type="text" name="iam3" id="iam3<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
</td>
<td>
<input type="text" name="iam4" id="iam4<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
</td>
<td>
<input type="text" name="iamtot" id="iamtot<?php echo $no ?>" class="form-control form-filter" readonly >
</td>
<td>
<input type="text" name="gam1" id="gam1<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
</td>
<td>
<input type="text" name="gam2" id="gam2<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
</td>
<td>
<input type="text" name="gam3" id="gam3<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
</td>
<td>
<input type="text" name="gam4" id="gam4<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
</td>
<td>
<input type="text" name="gamtot" id="gamtot<?php echo $no ?>" class="form-control form-filter" readonly >
</td>
<td>
<span class="center">
<input type="text" name="grntot" id="grntot<?php echo $no ?>" class="form-control form-filter" readonly >
</span>
</td>
<td>
<input type="text" name="percent" id="percent<?php echo $no ?>" class="form-control form-filter" readonly >
</td>
<td>
<input type="text" name="grade" id="grade<?php echo $no ?>" class="form-control form-filter" readonly >
</td>
<?php $no++; ?>
</tr>
<?php
}
}
?>
</tbody>
</table>
Modified Script
<script>
function sum(obj) {
var Iam1 = document.getElementById('iam1'+obj).value;
if (Iam1=='')
Iam1 = parseInt('0');
var Iam2 = document.getElementById('iam2'+obj).value;
if (Iam2=='')
Iam2 = parseInt('0');
var Iam3 = document.getElementById('iam3'+obj).value;
if (Iam3=='')
Iam3 = parseInt('0');
var Iam4 = document.getElementById('iam4'+obj).value;
if (Iam4=='')
Iam4 = parseInt('0');
var iamtot = parseInt(Iam1) + parseInt(Iam2) + parseInt(Iam3) + parseInt(Iam4);
document.getElementById('iamtot'+obj).value = iamtot;
var Gam1 = document.getElementById('gam1'+obj).value;
if (Gam1=='')
Gam1 = parseInt('0');
var Gam2 = document.getElementById('gam2'+obj).value;
if (Gam2=='')
Gam2 = parseInt('0');
var Gam3 = document.getElementById('gam3'+obj).value;
if (Gam3=='')
Gam3 = parseInt('0');
var Gam4 = document.getElementById('gam4'+obj).value;
if (Gam4=='')
Gam4 = parseInt('0');
var gamtot = parseInt(Gam1) + parseInt(Gam2) + parseInt(Gam3) + parseInt(Gam4);
document.getElementById('gamtot'+obj).value = gamtot;
var UtSt = document.getElementById('utst'+obj).value;
if (UtSt=='')
UtSt = parseInt('0');
var max = Math.max(iamtot,gamtot);
var grt = (parseInt(max) + parseInt(UtSt))/2;
var grt = grt.toFixed(2);
document.getElementById('grntot'+obj).value = grt;
var per = (parseInt(grt)/20)*100;
document.getElementById('percent'+obj).value = per;
var Grade;
if( parseInt(per) >= 90 ){
Grade = "A1";
}
else if( parseInt(per) >= 80 ){
Grade = "A2";
}
else if( parseInt(per) >= 70 ){
Grade = "B1";
}
else if( parseInt(per) >= 60 ){
Grade = "B2";
}
else if( parseInt(per) >= 50 ){
Grade = "C1";
}
else if( parseInt(per) >= 40 ){
Grade = "C2";
}
else if( parseInt(per) >= 33 ){
Grade = "D";
}
else if( parseInt(per) >= 21 ){
Grade = "E1";
}
else {
Grade = "E2";
}
document.getElementById('grade'+obj).value = Grade;
}
</script>