Php JQuery在编辑后不替换表行

我正在开发一个laravel应用程序，我正在用jQueryAjax执行CRUD。发生的情况是，当我尝试在插入或重新加载页面后首次编辑记录时，效果很好。但是，如果我试图编辑刚刚编辑过的记录，编辑会起作用，但更改不会显示在页面上，或者特定行不会被替换

为了实现这一点，我在将记录插入表时为每一行分配一个唯一的id。这就是我的代码的外观：

表:

<tbody id="subjects">
        @foreach($subjects as $subject)
            <tr id="row{{$subject->id}}">
                <td>{{$subject->name}}</td>
                <td>{{$subject->level}}</td>
                <td>
                    <a data-id="{{$subject->id}}" data-name="{{$subject->name}}" data-level="{{$subject->level}}" data-toggle="tooltip" title="Edit" id="edit-modal" href="#" role="buton">
                        <i class="glyphicon glyphicon-edit text-info"></i>
                    </a>
                </td>
                <td>
                    <a id="delete" data-id="{{$subject->id}}" data-toggle="tooltip" title="Delete" href="#" role="button">
                        <i class="glyphicon glyphicon-trash text-danger"></i>
                    </a>
                </td>

            </tr>
        @endforeach
    </tbody>

@foreach（$subject作为$subject）
{{$subject->name}
{{$subject->level}
@endforeach

要插入记录的脚本：

$(".box-footer").on('click', '.add-subject', function(event) {
    event.preventDefault();
    /* Act on the event */

    var name = $('#name').val();
    var level = $('#level').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "POST",
        url: "/subjects",
        data: {name: name, level: level},
        success: function(data) {

            if (data.errors) {
                $('.errors').removeClass('hidden');
                var errors = '';
                for(datum in data.errors){
                    errors += data.errors[datum] + '<br>';
                }
                $('.errors').show().html(errors); //this is my div with 

            } else {
                $('#subject-modal').modal('hide');

                var html;
                html += '<tr id="row"'+data.id +'">';
                    html += '<td>'+data.name+'</td>';
                    html += '<td>'+data.level+'</td>';

                    html += '<td><a id="edit-modal" data-id="'+data.id+'" data-name="'+data.name+'" data-level="'+data.level+'" data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a></td>';

                    html += '<td><a id="delete" data-id="'+data.id+'" data-toggle="tooltip" title="Delete" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a></td>';
                html += '</tr>';

                $("#subjects").append(html);


            }                      
        },
        error: function(data) {
            // body...
            $('#subject-modal').modal('hide');
            // display error

            $('.errors').removeClass('hidden');
            $('.errors').text('Ooops! There was an error. Please try again, and if error persits contact administrator');

        }
    });

});

$（“.box footer”）。在（'单击'，'添加主题'，函数（事件）{
event.preventDefault（）；
/*对事件采取行动*/
var name=$（'#name'）.val（）；
var level=$（'#level'）.val（）；
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
$.ajax({
类型：“POST”，
url:“/主题”，
数据：{name:name，level:level}，
成功：功能（数据）{
if（data.errors）{
$（'.errors'）.removeClass（'hidden'）；
var误差=“”；
用于（数据中的基准。误差）{
错误+=数据。错误[数据]+'
'；
}
$（'.errors'）.show（）.html（errors）；//这是带有
}否则{
$（“#主题模态”）.modal（'hide'）；
var-html；
html+=''；
html+=''+数据。名称+''；
html+=''+数据.level+''；
html+=''；
html+=''；
html+=''；
$（'#row'+data.id）.replacetwith（html）；
控制台日志（数据）；
}
},
错误：函数（数据）{
//显示错误
$（'.errors'）.removeClass（'hidden'）；
$（'.errors'）.text（'Ooops！出现错误。请重试，如果出现错误，请与管理员联系'）；
}
});
});

---

我的代码中遗漏了什么吗？我有没有更好的办法？请帮忙

我建议您按照以下步骤进行：

function editModel(id){
    var name = $('#name'+id).val();
    ....
}

给每个输入一个唯一的id，例如：

id=“name{{{{$subject->id}”

编辑函数应该像这样在编辑按钮中传递变量[ID]：

onclick=“editModel（{{{$subject->ID}}”）；“

在功能上，代码应如下所示：

function editModel(id){
    var name = $('#name'+id).val();
    ....
}

现在，您可以轻松地选择每个输入。 您还可以发送包含[ID]的数据，以便在后端进行编辑

• 在DOM就绪后创建表时，DOM无法访问该表，所以您应该给出每个输入和Id以供选择

---

我希望能够在表上显示行的更新版本。您可以使用内联编辑，或者在编辑后使用ajax重新加载表