如何重复jQuery函数答案

【问题标题】：how to repeat jQuery function如何重复jQuery函数
【发布时间】：2018-10-11 16:57:20
【问题描述】：

在下面的代码中，我从 mysql 表中访问学生 ID 和学生姓名，并让用户输入获得的分数。当用户输入标记时，jQuery 函数会自动计算百分比并将其显示在下一个输入框中，即百分比。有 20 名学生必须输入分数。一切对我来说都很好，但是 jQuery 只计算第一个输入框值并以百分比显示结果，在其余 19 列中它什么也没显示。代码如下：-

<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='' type='number' value='' class='1' id='mysecondnumber' style='width: 120px;'>".'</td>

                    <td>'."<input name='obtpercentage[]' placeholder='' type='percentage' value='' class='1' onclick='ShowPercentage()' id='mypercenttextbox ' 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>
var SecondNumVal = "20";

function ShowPercentage() {

    var $inputs = $('input');
    // get values
    var firstNumVal = $inputs.eq(3).val();
    // compute something
    var percentVal = (firstNumVal / SecondNumVal) * 100;
    // set value
    $inputs.eq(4).val(parseInt(percentVal) + '%').prop('readonly', true);
}

$(document).ready(function() {
    $('#mysecondnumber').on('change blur', ShowPercentage);
});
</script>

我希望 jQuery 计算所有 20 个条目的百分比。

【问题讨论】：

ID 是唯一的。
不要在同一页面上使用相同的 id。
请点击edit，然后点击[<>] sn-p 编辑器。为多个学生添加 HTML（非 PHP）并将脚本粘贴到脚本窗格中。
你想要的是使用类和相对寻址：$('.mysecondnumber').on("change blur",ShowPercentage) using firstNumVal = $(this).closest("tr").find("[name='obtmarks[]']").val()
我的代码就是一个例子——因为你没有发布 html 我无法测试它。您必须自己付出一点努力。

标签： php jquery

【解决方案1】：

使用类 - 您的 ID 被重复，这是无效的
没有数字类
不要回声
不要连接 HTML
在 value="" 中使用正确的引号
在单元格之外不要有输入字段

?><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'] ?><input type="hidden" name="student_name[]" value="<?= $row['student_name'] ?>"></td>
    <td><input name="obtmarks[]" placeholder="" type="number" value="" class="obtmarks" style="width: 120px;"></td>
    <td><input name="obtpercentage[]" placeholder="" type="percentage" value="" class="mypercenttextbox" style="width: 120px;">
    <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 ?>"></td>

</tr>

那你就可以了

$('.obtmarks').on("change blur",ShowPercentage)

使用

var obtval = $(this).val(); // obtmarks
var myPercent = $(this).closest("tr").find(".mypercenttextbox").val();

【讨论】：