Fatal编程技术网
  • jquery/
  • 如何在jQuery中计算自动评分和备注

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

jquery

如何在jQuery中计算自动评分和备注,jquery,Jquery,在HTML表中，当用户在“获得的分数”列（这是一个HTML文本框）中输入分数时，下面的代码通过JQuery自动计算百分比。我还有两个专栏“等级”和“备注”。当用户输入分数时，百分比会自动计算，我想要的是自动计算分数和备注。标准可能高于90%为A+，介于80%和90%之间为A，因此，当学生获得30%的分数时，可能会失败。如果成绩是A+的话，评语是优秀的，如果成绩是A，评语是好的，依此类推 HTML代码如下所示：- <table id = "marks" class="data-table"&

在HTML表中，当用户在“获得的分数”列（这是一个HTML文本框）中输入分数时，下面的代码通过JQuery自动计算百分比。我还有两个专栏“等级”和“备注”。当用户输入分数时，百分比会自动计算，我想要的是自动计算分数和备注。标准可能高于90%为A+，介于80%和90%之间为A，因此，当学生获得30%的分数时，可能会失败。如果成绩是A+的话，评语是优秀的，如果成绩是A，评语是好的，依此类推

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>

<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>


Sr.No.
学生ID
学生姓名
获得分数
百分比
等级
备注
JQuery脚本如下所示：-

<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>

<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>


$（'#marks'）。on（'change'，'.obtmark'，function（）{
var SecondNumVal=“20”；
$mark=$（此）
var firstNumVal=$mark.val（）；
//查找此控件所在的tr和相应的百分比字段
$pct=$mark.closest（'tr'）.find（'.percentage'））
百分比值=（第一个数值/第二个数值）*100
pct=parseInt（percentVal）+'%'；
$pct.val（pct.attr（'readonly'，true）；
});
$（'#marks'）。on（'change'，'.percentage'，function（）{
$grade=$（此）
var obtgrade=$grade.val（）；
$studentgrade=$grade.closest（'tr'）。查找（'stugrades'））

如果（obtgrade>=90且由于所有操作都依赖于单个值，则当标记更改时，您可以同时执行所有操作。
除此之外，您还试图将整数值与字符串进行比较，并混淆选择器

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



$（'#marks'）.on（'change'，'.obtmark'，function（）{
var SecondNumVal=“20”；
$mark=$（此）
var firstNumVal=$mark.val（）；
//查找此控件所在的tr和相应的百分比字段
$row=$mark.closest（'tr'）
$pct=$row.find（“.percentage”）
百分比值=（第一个数值/第二个数值）*100
pct=parseInt（percentVal）+'%'；
$pct.val（pct.attr（'readonly'，true）；
$studentgrade=$row.find（“.grades”）
$备注=$row.find（'.remark'））
如果（percentVal>=90&&percentVal

$（'#marks'）.on（'change'，'.obtmark'，function（）{
var SecondNumVal=“25”；
$mark=$（此）
var firstNumVal=$mark.val（）；
//查找此控件所在的tr和相应的百分比字段
$row=$mark.closest（'tr'）
$pct=$row.find（“.percentage”）
百分比值=（第一个数值/第二个数值）*100
pct=parseInt（percentVal）+'%'；
$pct.val（pct.attr（'readonly'，true）；
$studentgrade=$row.find（“.grades”）
$备注=$row.find（'.remark'））

如果（percentVal>=90&&percentVal，这是一个简单的条件。很长，但是…你自己试过什么吗？@msg我已经编辑了上面我试过的代码。但是它不起作用。我的错，我以为它是JavaScript…）非常感谢。现在工作很好。你帮了我很大的忙。诚挚的问候！很抱歉打扰你很久了。我想将secondNumVal更改为25。这样，如果输入为25，它将给出100%，但是上面的代码显示125，即使我已将secondNumVal更改为25。你能帮帮忙吗。@Akhtar如果你不显示任何代码，它不会显示，但它是为我工作…注意你的情况，变量名为
SecondNumVal
，而不是
SecondNumVal
（js上的第二行）。