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

Question

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

在行的末尾有一个按钮，用于保存新行的数据。当用户点击保存时，我禁用文本框和复选框以及

删除create的按钮，我需要的是添加到此行的编辑和删除按钮，这是所有表行的默认值，我应该怎么做？

以下是禁用行字段的代码：

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

这是所有行的defult按钮（如果我按下创建并刷新页面，我将在这个新保存的行中看到按钮，但我想

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

   <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

您必须在响应ajax调用时返回ID，并使用返回的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");
    });
}