使用 jquery 在表中进行内联编辑

Question

我刚刚创建了一个带有 4 个按钮edit、delete、update和 的表Cancel。所有操作都可以正常工作，但仅取消不起作用。
操作：
edit- 单击编辑按钮时，输入框将附加到滚动名称列（编辑按钮将隐藏，更新按钮将显示）
update并且delete工作正常。
但是当我点击取消输入框应该隐藏在我的表格中。[![在此处输入图像描述][2]][2][![在此处输入图像描述][1]][1]它不起作用。
出了什么问题？请提出任何建议

var roleList=[{
"Id": "0",
"name":"designer"
}];
$(document).ready(function () {
    empRoles()
});

function empRoles() {

                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 btn-sm" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success btn-sm" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger btn-sm" onclick="deleteRow(this)" data-dismiss="modal" id="dlt' + i + '"><i class="fa fa-trash-o"></i>Delete</button><button class="btn editCancel btn-danger btn-sm" id="editCancel' + i + '" ><i class="fa fa-times"></i>Cancel</button></td><tr>';
                    $('#content').append(table);
                    editUpdate();


}
function editUpdate() {
    //$('.rowInput').hide();
    $('.update').hide();
    $('.editCancel').hide();
}
$(document).on('click', ".edit", function (e) {
    var editId = $(this).attr('id');
    e.stopPropagation();

    $("#" + editId).hide();
    var number = editId.replace("edit", "");
    $("#dlt" + number).hide();
    $("#update" + number).show();
    $("#editCancel" + number).show();

    var currentTD = $(this).parents('tr').attr('id');

    var rowId = $("#" + currentTD +" "+"td.roleName");
    var existingRoleName = rowId.text();
    var updateRoleName = rowId.html('<input type="text" class="inputVal" value="'+ existingRoleName + '" >');

});
$(document).on('click', ".update", function (e) {
    var updatedBy = $("#userName").text();

    var updateId = $(this).attr('id');
     e.stopPropagation();
    $("#" + updateId).hide();
    var number = updateId.replace("update", "");
    $("#editCancel" + number).hide();
    $("#dlt" + number).show();
    $("#edit" + number).show();

    var currentTD = $(this).parents('tr').attr('id');
    var a = $("#" + currentTD + " " + "td.roleName");
    var rowVal = $("#" + currentTD +" "+"td.roleName input").val();

    a.text(rowVal);
    var id = $(this).closest('tr').attr('id');
    var name = $(this).parents('tr').find(':nth-child(2)').html();
    var Roles = { name: name, role_id: id, updated_by:updatedBy };
    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);
        }
    });
});
$(document).on('click', ".editCancel", function () {debugger
    var cancelId = $(this).attr('id');
    $("#" + cancelId).hide();
    var number = cancelId.replace("editCancel", "");
    $("#update" + number).hide();
    $("#edit" + number).show();
    $("#dlt" + number).show();
    var currentTD = $(this).parents('tr').attr('id');
    var rowId = $("#" + currentTD + " " + ".inputVal");
    var existingRoleName = rowId.val();
    var updateRoleName = rowId.html('<td>' + existingRoleName + '</td>');

});

完整代码- https://jsfiddle.net/xhetgowp/1/

Answer 1

试试这个代码

var roleList=[{
"Id": "0",
"name":"designer"
}];
$(document).ready(function () {
    empRoles()
});

function empRoles() {
    
                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 btn-sm" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success btn-sm" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger btn-sm" onclick="deleteRow(this)" data-dismiss="modal" id="dlt' + i + '"><i class="fa fa-trash-o"></i>Delete</button><button class="btn editCancel btn-danger btn-sm" id="editCancel' + i + '" ><i class="fa fa-times"></i>Cancel</button></td><tr>';
                    $('#content').append(table);
                    editUpdate();
              

}
function editUpdate() {
    //$('.rowInput').hide();
    $('.update').hide();
    $('.editCancel').hide();
}
};
$(document).on('click', ".edit", function (e) {
    var editId = $(this).attr('id');
    e.stopPropagation();

    $("#" + editId).hide();
    var number = editId.replace("edit", "");
    $("#dlt" + number).hide();
    $("#update" + number).show();
    $("#editCancel" + number).show();

    var currentTD = $(this).parents('tr').attr('id');

    var rowId = $("#" + currentTD +" "+"td.roleName");
    var existingRoleName = rowId.text();
    var updateRoleName = rowId.html('<input type="text" class="inputVal" value="'+ existingRoleName + '" >');
    debugger;
    rowId.attr("data-existing",existingRoleName);
    
});
$(document).on('click', ".update", function (e) {
    var updatedBy = $("#userName").text();

    var updateId = $(this).attr('id');
     e.stopPropagation();
    $("#" + updateId).hide();
    var number = updateId.replace("update", "");
    $("#editCancel" + number).hide();
    $("#dlt" + number).show();
    $("#edit" + number).show();

    var currentTD = $(this).parents('tr').attr('id');
    var a = $("#" + currentTD + " " + "td.roleName");
    var rowVal = $("#" + currentTD +" "+"td.roleName input").val();
    
    a.text(rowVal);
    var id = $(this).closest('tr').attr('id');
    var name = $(this).parents('tr').find(':nth-child(2)').html();
    var Roles = { name: name, role_id: id, updated_by:updatedBy };
    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);
        }
    });
});

$(document).on('click', ".editCancel", function () {
    var cancelId = $(this).attr('id');
    $("#" + cancelId).hide();
    var number = cancelId.replace("editCancel", "");
    $("#update" + number).hide();
    $("#edit" + number).show();
    $("#dlt" + number).show();
    var currentTD = $(this).parents('tr').attr('id');
    var rowId = $("#" + currentTD + " " + ".inputVal");
    var existingRoleName = rowId.val();
    console.log("existingRoleName"+existingRoleName);
    var updateRoleName = rowId.html('<td>' + existingRoleName + '</td>');
    console.log("updateRoleName"+updateRoleName);
    debugger;
     var a = $("#" + currentTD + " " + "td.roleName");
    var rowVal = a.attr('data-existing');
    a.text(rowVal);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table table-hover table-bordered" id="mydata">
                        <thead class="colorBlue">
                            <tr>
                                <th>S.NO</th>
                                <th>ROLE NAME</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody id="content"></tbody>
                    </table>