Javascript ajax返回的表单未发送正确的id

我将通过ajax为表中的每一行返回一个表单。我这样做是为了在每一行插入特定于学生id的记录。这是ajax返回表单时的外观：

问题是当返回表单时，我试图为第一个学生插入分数拉尔夫·T·亨斯利我得到了该学生正确的

id

。但是当我试图为剩下的学生插入分数时，我得到了拉尔夫·T·亨斯利的

id

，即

7

我正确地显示了每个学生的不同id，但似乎每当我单击“保存”按钮时，它只返回结果集中第一个学生的id。我的代码结构如下

这就是我通过ajax返回表单的方式

$output .= '<tbody>';
            if (mysqli_num_rows($result) > 0) {
                    while ($row = mysqli_fetch_array($result)) {
                        # code...
                            // unseen fields values that will be send
                        $output .= '<form action="#" method="post" class="st_score_form">';
                            $output .= '<tr>';
                                $output .= '<td>
                                    <input type="number" class="student_set" name="student_id" value="'.$row['student_id'].'">
                                    </td>';
                                $output .= '<td style="display:none;">
                                    <input type="text" class="subject_set" name="subject" value="'.$subject_id.'">
                                    </td>';
                                $output .= '<td style="display:none;">
                                    <input type="number" class="class_set" name="class_id" value="'.$class_id.'"></td>';
                                $output .= '<td style="display:none;"><input type="text" name="term" value="'.$term.'"></td>';
                                $output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
                                $output .= '<td><input type="number" class="score_set" min="59" max="100"  name="score" class="form-control" required="required"></td>';
                                $output .= '<td><input type="submit" name="savebtn" value="Save" class="btn btn-info form-control savebtn"></td>';
                            $output .= '</tr>';
                            // -- end of unseen fields
                        $output .= '</form>';
                    }
        $output .= '</tbody>';

$output.=''；
如果（mysqli_num_行（$result）>0）{
while（$row=mysqli\u fetch\u数组（$result））{
#代码。。。
//将发送的不可见字段值
$output.=''；
$output.=''；
$output.='
';
$output.='
';
$output.='
';
$output.=''；
$output.=''.$row[“first_name”]。'.substr（$row[“middle_name”]、0、1）。“$row[“姓氏”]”；
$output.=''；
$output.=''；
$output.=''；
//--看不见的字段的结束
$output.=''；
}
$output.=''；

这是我的剧本：

$(document).on('click', '.savebtn', function(event) {
    event.preventDefault();

    var student = $('.student_set').val();
    var student_class = $('.class_set').val();
    var subject = $('.subject_set').val();
    var score = $('.score_set').val();

    console.log("Student " +student);
    console.log("Class " +student_class);
    console.log("subject " +subject);
    console.log("Score " +score);

    if (student != null && student_class != null && subject != null && score != null) {
      $.ajax({
        url:"includes/ajax/create_score.php",
        method:"post",
        data:{"student":student, "class":student_class, "subject":subject, "score":score},
        dataType:"text",
        success:function(data){
          $("#success").fadeIn('slow', function(){       
             $("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
           });
        }
      });
    } else {
      $("#result").html('');
    }


});
$('body').append('<button class="savebtn"></button>');

$（文档）.on（'click'，'savebtn'，函数（事件）{
event.preventDefault（）；
var student=$（'.student_set'）.val（）；
var student_class=$（'.class_set'）.val（）；
var subject=$（'.subject_set'）.val（）；
var score=$（'.score_set'）.val（）；
控制台日志（“学生”+学生）；
控制台日志（“类”+学生类）；
控制台日志（“主题”+主题）；
控制台日志（“分数”+分数）；
if（student！=null&&student\u class！=null&&subject！=null&&score！=null）{
$.ajax({
url：“includes/ajax/create_score.php”，
方法：“张贴”，
数据：{“学生”：学生，“班级”：学生\班级，“科目”：科目，“分数”：分数}，
数据类型：“文本”，
成功：功能（数据）{
$（“#success”）.fadeIn（'slow'，function（）{
$（“#success”）.html（'Alert！'+data+''）；
});
}
});
}否则{
$（“#结果”）.html（“”）；
}
});
$（'body'）。追加（''）；

---

我愿意接受反馈和建议，以帮助我实现这一点。谢谢！！！

你的JS函数的作用域是按钮。这意味着关键字

这

是klicked按钮的DOM元素

现在，您可以开始在DOM（起点是您的按钮）上搜索具有您正在搜索的

student\u id

的输入字段

$(this)
    .parents('tr').first()          // go up the HTML structure to the next TR.
    .find('[name="student_id"]').first()   // find the input with the name `student_id`

---

首先，为所有输入设置相同的id是不好的做法，（id在整个页面中必须是唯一的）

在您的代码中，您在这里得到了错误的值

var student=$（'.student_set'）.val（）；

：

您应该将id设置为：

$(this).parents('tr').find('.student_set').val();

另一个领域也是如此

下面是一个工作片段：

$（函数（）{
$（“.savebtn”）。在（“单击”上，函数（e）{
警报（$（this.parents（'tr'）.find（“.student_set”）.val（））；
});
})

id在HTML文档中必须是唯一的。您不能在循环中使用id use class，而不能在循环中使用id尝试不要在循环中使用id。您应该知道在HTML中只为一个元素提供一次id。然后，当您要选择正确的元素时，请尝试选择父元素并在其中搜索名为student\u id->$（this）.parents（'tr'）.first（）.find（'[student_id]'）.first（）我做了更改，但仍然没有解决问题。@Chris，你能更详细地说明我如何将其应用到我的代码中吗？我应该将其分配给我的变量吗？谢谢@bRIMOs。我不知道你是否有时间这样做，但是，我在我的分数输入中添加了一个必需的属性，但是当我单击“保存”而不输入va时将lue添加到分数字段中，它不会验证。有什么想法吗？您是否添加了表单标签？否则它将不起作用！请参阅我的更新答案：）直接提交？