Jquery 内联编辑和更新

我下面的代码是针对带有内联

edit

和

update

以及一些控制器的动态表的。代码工作正常，但我在对单行执行

edit

和

update

操作时发现了一个错误

如果我在多行中单击了“编辑”按钮，然后我在任意一行中单击了“更新”按钮，所有行都会更新。实际上，只有相关行才应该得到更新，对吗？有什么错误吗？

each（）

方法中有错误吗

以下是我的职能：

function empRoles() {
    $.ajax({
        type: 'POST',
        url: "/Admin/getRolesList",
        data:'{}',
        dataType: 'json',
        success: function (response) {
            console.log(response)
            var roleList = response;
            $('#content').html('');
            for (var i = 0; i < roleList.length; i++) {
                var table = '<tr  id="' + roleList[i].Id + '"><td>' + (i + 1) + '</td><td class="roleName" id="name' + i + '">' + roleList[i].name + '</td><td><button  class="btn edit btn-info" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" onclick="deleteRow(this)" data-dismiss="modal" ><i class="fa fa-trash-o"></i>Delete</button></td><tr>';
                $('#content').append(table);
                editUpdate();
            }
        },
        failure: function (response) {
            noData()
        }
    });
}
function noData() {
    $('.noData').show();
}
function editUpdate() {
    $('.update').hide();
    $('.edit').click(function () {debugger
        var editId = $(this).attr('id');
        $(this).parents('tr').find(':nth-child(2)').not(':button').css("background", "#d9edf7").focus();
        $("#" + editId).hide();
        var number = editId.replace("edit", "");
        $("#update" + number).show();

        var currentTD = $(this).parents('tr').find(':nth-child(2)');
        $.each(currentTD, function () {
             $(this).prop('contenteditable', true)

        });
    });

    $('.update').click(function () {debugger
        $(this).parents('tr').find(':nth-child(2)').not(':button').css("background", "none");
        var updateId = $(this).attr('id');
        $("#" + updateId).hide();
        var number = updateId.replace("update", "");
        $("#edit" + number).show();

        var currentTD = $(this).parents('tr').find(':nth-child(2)');
        $.each(currentTD, function () {
            $(this).prop('contenteditable', false)
        });

        var id = $(this).closest('tr').attr('id');
        var name = $(this).parents('tr').find(':nth-child(2)').html();
        var Roles = { name: name, role_id: id };
        var ajxObj = { oRoles: Roles };
        $.ajax({
            type: 'POST',
            url: "/Admin/RoleUpdate",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(ajxObj),
            dataType: 'json',
            success: function (response) {
                $(".roleCreated").html("Role Updated successfully!");
                $('.roleCreated').show();
                setTimeout(function () {
                     $('.roleCreated').hide();
                 }, 1500);
                empRoles()
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    });

}

函数empRoles（）{
$.ajax({
键入：“POST”，
url:“/Admin/getRolesList”，
数据：“{}”，
数据类型：“json”，
成功：功能（响应）{
console.log（响应）
var roleList=响应；
$（'#content'）.html（''）；
对于（变量i=0；i

---

还有一个疑问，

.focus（）

在最后一次

tr

请大家帮我澄清一下。

发生这种情况是因为您正在通过“更新”单击调用“empRoles（）”。无论何时单击“更新”，都会发生一个ajax调用，然后调用“empRoles”。然后，您的此方法（empRoles）将重新创建整个表，您将看到一个全新的表。

---

请仅在需要更新整个表时尝试调用empRoles

你有可用的fiddle吗？@Nitesh我正在从数据库获取数据，这就是为什么我不添加fiddle。empRoles函数的用途是什么？我从代码中了解到：每当单击“.update”时，就会发生一个ajax调用，成功后会进一步调用“empRoles（）”，在empRoles中，你会重新创建另一个表并将其放入内容中。这就是你想要的吗？不，更新和编辑是有区别的。在“编辑”中，您并没有执行任何ajax调用或调用“empRoles（）”，所以并没有新的表创建。请尝试在更新中调用empRoles（）进行一次注释，然后进行检查。