Javascript 在索引视图中的表中编辑内联

我使用以下代码来显示表行 对于每一行都有编辑和删除按钮，我想做的是 当我单击特定行的“编辑”时，请从“仅显示”更改该行 要编辑行（而不是导航到其他页面进行编辑），我应该如何操作

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox1)
        </th>

        <th></th>
    </tr>

    <tbody id="data-table">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.checkBox1)
                </td>

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

---

尝试显式指定参数，好吗？

您可以使用jEditable并将其与您的表集成

---

如果数据表适合您的项目，也许您也可以将其用于jEditable，比如

下面的函数使行可编辑

var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
    nCurrentEdit = $(this).attr("id");

    var oTR = $(this).parents("tr").first();

    var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
    oTR.find("td:nth-child(1)").html(sText);
    oTR.find(":disabled").prop("disabled", false);

    if (oTR.find("#btnsubmit").length == 0)
        oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");

    oTR.find("td:last a").hide();

    event.preventDefault();
});

---

你试过什么吗？使用jQuery，您可以用输入替换所有文本，但您所要求的不是一项简单的任务。@cale_b-这就是我打开此消息以获取一些示例的原因，因为我在web上没有找到任何类似的示例。。。

@Html.EditorFor(m => m[i].name) and

 @Html.EditorFor(m=> m[i]checkBox1)

var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
    nCurrentEdit = $(this).attr("id");

    var oTR = $(this).parents("tr").first();

    var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
    oTR.find("td:nth-child(1)").html(sText);
    oTR.find(":disabled").prop("disabled", false);

    if (oTR.find("#btnsubmit").length == 0)
        oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");

    oTR.find("td:last a").hide();

    event.preventDefault();
});

$('#data-table').on('click', '#btnUpdate', function () {
    var postData = {
        id : nCurrentEdit,
        name: $("#name").val(),
        checkBox1: $("#checkBox1").val(),
        checkBox2: $("#checkBox2").val(),
        checkBox3: $("#checkBox3").val()
    };

    $.post('@Url.Action("AjaxEdit", "Roles")', postData, null);

    var sNewText = $(this).parents("tr").first().find("td:first input").val();
    $(this).parents("tr").first().find("td:first").append(sNewText);
    $(this).parents("tr").first().find("td:first input").remove();
    $(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);

    $(this).parent().find("a").show();
    $(this).hide();
});