Following table is accessing values from mysql table in first two columns (exclude sr.no.) and offering to enter 'obtained marks' in 4th column. I have also made three columns after obtained marks which are 'percentage', 'grade' and remarks. I want to calculate percentage automatically when user enters marks in obtained marks column and navigates to next input box which is in second row:
<table id = "result" class="data-table">
<caption class="title"></caption>
<thead>
<tr>
<th><strong>Sr.No.</strong></th>
<th><strong>Student ID</strong></th>
<th align="center"><strong>Student Name</strong></th>
<th style="text-align: center;"><strong>Obtained Marks</strong></th>
<th style="text-align: center;"><strong>Percentage</th>
<th style="text-align: center;"><strong>Grade</strong></th>
<th style="text-align: center;"><strong>Remarks</strong></th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
$total = 0;
while ($row = mysqli_fetch_array($query)) {
$stu = $row['stu_id'] == 0 ? '' : number_format($row['stu_id']);
echo '<tr>
<td>'.$no.'</td>
<td>'.$row['student_id'].'</td>
<input type="hidden" name="student_id[]" value='.$row['student_id'].'>
<td style="text-align: left;">'.$row['student_name'].'</td>
<input type="hidden" name="student_name[]" value='.$row['student_name'].'>
<td>'."<input name='obtmarks[]' placeholder='' class='form-control' type='number' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='percentage[]' placeholder='' class='form-control' type='number' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='grade[]' placeholder='' class='form-control' type='number' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='remarks[]' placeholder='' class='form-control' type='number' required='required' style='width: 120px;'>".'</td>
<input type="hidden" name="class[]" value='.$row['class'].'>
<input type="hidden" name="test_date[]" value='.$test_Date.'>
<input type="hidden" name="test_subject[]" value='.$Subject_type.'>
<input type="hidden" name="test_type[]" value='.$TestType.'>
</tr>';
$total += $row['stu_id'];
$no++;
}
?>
</tbody>
</table>
you can simply achieve this by using <input type="text"/>
event of onkeyup('calculateFn()')
. For this, you have Total Marks too to get that percentage out for your obtained marks. using this script
<script>
var obmarks=document.getElementById("obmarks");
var totalmarks=document.getElementById("totalmarks");
var percent=(obmarks/totalmarks)*100;
document.getElementById("percentage").value=percent;
</script>
here ids are those corresponding ids of required text fields. Hope this help you out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.