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>

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

2 个答案: