在表格行的末尾添加編輯/刪除按鈕

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