如何为动态生成的文本框应用jQuery blur事件实现对应等级自动填充

原代码的核心问题是jQuery选择器无法匹配动态生成的marks_1、marks_2这类带编号的输入框，且未关联对应科目的grades_x输入框，导致事件无法触发或填充错误。以下是具体修改方案：

一、修改jQuery事件绑定逻辑 #

直接替换原jQuery代码，解决事件匹配与对应等级框关联问题：

// 匹配所有ID以marks_开头的输入框，绑定blur事件
$(document).on('blur', 'input[id^="marks_"]', function(){
    // 获取当前输入框的编号后缀（比如marks_1的后缀是1）
    var suffix = $(this).attr('id').split('_')[1];
    // 获取当前成绩值与对应科目总分
    var marksVal = $(this).val();
    var totMarksVal = $(this).closest('tr').find('input[name="totmarks[]"]').val();

    // 空值校验，避免无效请求
    if(marksVal && totMarksVal){
        $.ajax({
            url: "getgrade.php",
            type: "POST",
            // 传递成绩和总分（需与getgrade.php的参数要求匹配）
            data: {
                marks: marksVal,
                totmarks: totMarksVal
            },
            dataType: "json",
            cache: false,
            success: function(data){
                // 填充对应编号的等级输入框
                $('#grades_' + suffix).val(data[0]);
            }
        });
    }
});

修改说明： #

• 用input[id^="marks_"]属性选择器，匹配所有动态生成的成绩输入框，解决事件绑定失效问题
• 通过拆分ID获取编号后缀，精准定位对应科目的等级输入框，确保填充到正确位置
• 增加总分参数传递（等级计算通常依赖总分），并添加空值校验避免无效AJAX请求

二、可选：用类名简化选择器（更健壮的方案） #

如果不想依赖ID后缀，可修改PHP代码给输入框添加统一类名，通过DOM结构关系关联元素：

修改后的PHP代码片段： #

<?php
$c=1;
while($row = mysqli_fetch_row($result))
{ 
    echo htmlentities($row[1]); ?>
    <table border="1">
        <tr>
            <th>Total Marks</th>
            <th>Obtained</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td><input type="number" name="totmarks[]" value="" class="totmarks-input"></td>
            <td><input type="number" name="marks[]" value="" id="marks_<?php echo $c; ?>" class="marks-input"></td>
            <td><input type="text" name="grades[]" value="" id="grades_<?php echo $c; ?>" class="grades-input"></td>
        </tr>
    </table>
<?php
$c++;
}
?>

对应简化的jQuery代码： #

$(document).on('blur', '.marks-input', function(){
    var $currentRow = $(this).closest('tr');
    var marksVal = $(this).val();
    var totMarksVal = $currentRow.find('.totmarks-input').val();
    var $gradeInput = $currentRow.find('.grades-input');

    if(marksVal && totMarksVal){
        $.ajax({
            url: "getgrade.php",
            type: "POST",
            data: {
                marks: marksVal,
                totmarks: totMarksVal
            },
            dataType: "json",
            cache: false,
            success: function(data){
                $gradeInput.val(data[0]);
            }
        });
    }
});

这种方式通过DOM层级关系查找对应元素，不依赖ID命名规则，代码更灵活，后期修改HTML结构时不易出错。

三、后端代码适配 #

确保getgrade.php能正确接收前端传递的参数并返回JSON格式数据，示例逻辑：

<?php
// 假设已完成数据库连接等前置操作
$marks = $_POST['marks'];
$totmarks = $_POST['totmarks'];

// 示例等级计算逻辑，可根据实际需求调整
$percentage = ($marks / $totmarks) * 100;
if($percentage >= 90) $grade = 'A+';
else if($percentage >= 80) $grade = 'A';
else if($percentage >= 70) $grade = 'B';
else $grade = 'C';

// 返回JSON格式结果
echo json_encode([$grade]);
?>

内容的提问来源于stack exchange，提问作者Sikander Shahzad