在表格行的末尾添加编辑/删除按钮

Question

我已经在索引视图中内联创建表中的行。当用户单击添加行按钮时，它会将新的可编辑行预先添加到表中。

该行的末尾有一个用于保存新行数据的按钮。当用户单击“保存”时，我将禁用文本框和复选框，并

删除“创建”按钮，我需要的是将“编辑”和“删除”按钮添加到此行，这是所有表行的默认设置，我该怎么做？

这是禁用行字段的代码：

//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");

这是所有行的默认按钮（如果按创建和刷新页面，则在新保存的行中也会看到该按钮，但我想

在添加行且页面未刷新时添加它们...

   <td>
       @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
       @Html.ActionLink("Delete", "Delete", new { id = item.Id })
   </td>

这是我在用户单击创建新行时使用创建按钮添加新行的方式

var html = '<tr><td>@Html.TextBox("name")</td><td>@Html.CheckBox("checkBox1")</td><td>@Html.CheckBox("checkBox2")</td><td>@Html.CheckBox("checkBox3")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';

    function addRow() {

        if ($('#btnsubmit').length == 0) {

            //Append new row to the table
            jQuery(html).prependTo('#data-table');

更新这是表的示例，每行都有一个编辑/删除按钮

更新2

我尝试添加以下内容，但单击“创建”时未添加按钮

 $('#btnsubmit').click(function () {

                $.post("/Roles/Create", { name : $("name").val() }, function(NewID){

                    var oTD = $("#btnsubmit").parent();
                    oTD.append("<a href='/Roles/Edit/"+ NewID +"'>Edit</a>");

                    oTD.append("<a href='/Roles/Delete/"+ NewID +"'>Delete</a>");


                });

Answer 1

您将必须返回ID以响应ajax调用，并使用返回的ID添加附加定位符

function SaveData()
{
    $.post("/[Controllar]/Savedata", { firstname : $("txtFirst").val(), lastname : $("txtLast").val() }, function(NewID){

        var oTD = $("#btnsubmit").parent();
        oTD.append("<a href='/[ControllarName]/Edit/"+ NewID +"'>Edit</a>");
        oTD.append("<a href='/[ControllarName]/Detail/"+ NewID +"'>Detail</a>");
        oTD.append("<a href='/[ControllarName]/Delete/"+ NewID +"'>Delete</a>");

        //Hide the create button
        $('#btnsubmit').remove();
        //Change the name property to disabled
        $('input').attr('readonly', true);
        $('#name').css("border", "none");
    });
}