如何在PHP的回声中调用jQuery脚本

Question

在下面的代码中，我想插入一个jquery脚本：我已经在代码中提到了要在其中插入jquery的空格：

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

 Here i want to add jquery script

                    <input type="hidden" name="class[]" value='.$row['class'].'>
                    <input type="hidden" name="test_date[]" value='.$TestDate.'>
                    <input type="hidden" name="test_subject[]" value='.$SelectSubject.'>
                    <input type="hidden" name="test_type[]" value='.$TestType.'>

                </tr>';

            $total += $row['stu_id'];
            $no++;

        }

        ?>

jQuery脚本如下：

<script>
var SecondNumVal = "20";

function ShowPercentage() {

    var $inputs = $('input');

    // get values
    var firstNumVal = $inputs.eq(0).val();


    // compute something
    var percentVal = (firstNumVal / SecondNumVal) * 100;

    // set value
    $inputs.eq(1).val(parseInt(percentVal) + '%').prop('readonly', true);

}

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

Answer 1

php将在呈现页面之前执行。 jQuery仅在页面呈现后才起作用。 如果要向每个字段添加自定义函数，请使用一个类并选择该类中的所有元素，然后在其中进行操作。 您可以在页面中的任何位置编写脚本，脚本将被执行。 无需添加到需要执行的地方。

Answer 2

正如其他答案所指出的那样，您无需在每一行中都包含该脚本即可运行。 另外，正如我在评论中提到的那样， $inputs引用整个文档中的输入，而不是每个tr ，即使这样做， $inputs.eq(0)也会引用该行中的第一个input ，这是student_id 。 简化示例（在input添加了新类，并将百分比更改为type="text" ），您只需在$.ready上调用此脚本即可

 // Delegate on the table to listen for changes in obtmark fields. // Less event listeners to attach $('#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); }); 

 <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> </tr> <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> </tr> <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> </tr> </table>