如何在jQuery中计算自动成绩和备注

Question

在HTML表中，当用户在"获得的标记"列(这是一个HTML文本框(中输入标记时，代码通过JQuery自动计算百分比。我还有两列"等级"和"备注"。当用户输入分数时，百分比会自动计算，我想要的是自动计算等级和备注。 标准可能高于 90% 是 A+，80% 到 90% 是 A，因此当学生获得 30% 的分数时，就会失败。此外，如果成绩为 A+ 备注为优秀，如果成绩为 A，备注为 v.good 等等。

HTML代码如下：-

<table id = "marks" 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?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 obtmark' type='number' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'>".'</td>
<td>'."<input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'>".'</td>
<input type="hidden" name="class[]" style="text-align: center;" value='.$row['class'].'>
<input type="hidden" name="test_date[]" value='.$TestDate.'>
<input type="hidden" name="test_subject[]" align="center" value='.$SelectSubject.'>
<input type="hidden" name="test_type[]" align="center" value='.$TestType.'>                             
</tr>';
$total += $row['stu_id'];
$no++;      
}
?>
</tbody>
</table>

JQuery 脚本如下：-

<script>
$('#marks').on('change', '.obtmark', function() {
var SecondNumVal = "20";
$mark = $(this)
var firstNumVal = $mark.val();
// Find the tr this control is in and the corresponding percentage field
$pct = $mark.closest('tr').find('.percentage')
percentVal = (firstNumVal / SecondNumVal) * 100
pct = parseInt(percentVal) + '%';
$pct.val(pct).attr('readonly', true);
});
$('#marks').on('change', '.percentage', function() {
$grade = $ (this)
var obtgrade = $grade.val();
$studentgrade = $grade.closest('tr').find('.stugrades')
if (obtgrade >=90 and <=100){
calculatedgrade = "A";
finalgrade = parseInt(calculatedgrade);
$calculatedgrade.val(finalgrade).attr('readonly', true);
}});
</script>

任何人都可以在jQuery中进行修改以计算接下来的两列吗？

Answer 1

由于所有操作都依赖于单个值，因此您可以在标记更改时同时执行所有操作。 除此之外，您还尝试将整数值与字符串进行比较，并混淆选择器。

我已经将您的 html 简化为有问题的字段，并且只将第一个条件作为示例供您完成。

$('#marks').on('change', '.obtmark', function() {
var SecondNumVal = "20";
$mark = $(this)
var firstNumVal = $mark.val();
// Find the tr this control is in and the corresponding percentage field
$row = $mark.closest('tr')
$pct = $row.find('.percentage')
percentVal = (firstNumVal / SecondNumVal) * 100
pct = parseInt(percentVal) + '%';
$pct.val(pct).attr('readonly', true);
$studentgrade = $row.find('.grades')
$remarks = $row.find('.remark')
if (percentVal >= 90 && percentVal <= 100) {
calculatedgrade = "A+";
remark = "Excellent";
}
$studentgrade.val(calculatedgrade).attr('readonly', true);
$remarks.val(remark).attr('readonly', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="marks">
<tr>
<td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td>
<td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td>
<td><input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'></td>
<td><input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'></td>
</tr>
</table>

Answer 2

$('#marks').on('change', '.obtmark', function() {
var SecondNumVal = "25";
$mark = $(this)
var firstNumVal = $mark.val();
// Find the tr this control is in and the corresponding percentage field
$row = $mark.closest('tr')
$pct = $row.find('.percentage')
percentVal = (firstNumVal / SecondNumVal) * 100
pct = parseInt(percentVal) + '%';
$pct.val(pct).attr('readonly', true);
$studentgrade = $row.find('.grades')
$remarks = $row.find('.remark')
if (percentVal >= 90 && percentVal <= 100) {
calculatedgrade = "A+";
remark = "Excellent";
}
$studentgrade.val(calculatedgrade).attr('readonly', true);
$remarks.val(remark).attr('readonly', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="marks">
<tr>
<td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td>
<td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td>
<td><input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'></td>
<td><input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'></td>
</tr>
</table>