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

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");
    });
}