Question

在HTML表中，当用户在“获得的标记”列（即HTML文本框）中输入标记时，以下代码通过JQuery自动计算百分比。我还有另外两列“等级”和“备注”。当用户输入分数时，百分比是自动计算的，我想要的是也自动计算等级和分数。 A +的标准可能高于90％，A的标准在80％至90％之间，因此当学生获得30％的分数时就会失败。同样，如果等级为A +，则评论为极好；如果等级为A，则评论为v。好，依此类推。

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>

如何计算jQuery中的自动评分和备注

2 个答案: