Javascript 如何使用jquery在MVC中创建可编辑表？

我正在使用“数据库优先”的方法构建我的第一个MVC应用程序，一切都很好，但是，我被困在使用jQuery使MVC表可编辑（内联）的点上，当我点击它时，每一行都有一个链接 链接，场景应如下：-

1单击特定行中的链接
2-使此特定行可编辑

问题如下：-
1-当我单击特定行的链接时
2-所有行都可以编辑

以下是HTML代码：-

<table id="my_table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.AFECode)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Remarks)
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr contenteditable="false">
                    <td contenteditable="false">
                        @Html.DisplayFor(modelItem => item.AFECode)
                    </td>
                    <td contenteditable="false">
                        @Html.DisplayFor(modelItem => item.Remarks)
                    </td>
                    <td contenteditable="false">
                        <a id="edit_link" href="#" onclick="edit()" >edit</a>
            }

        </table>

现在，我如何才能使包含我单击的链接的行处于可编辑状态？
提前感谢

您的

$（“#我的表格td”）

选择器选择所有

元素，从而切换所有表格单元格的

内容可编辑状态。由于每个
中都有重复的
id
属性，因此您也会生成无效的html，并使用相对选择器获取与链接关联的
元素

<a class="edit" href="#">edit</a> <!-- use a class name-->

最初没有理由添加
contenteditable
，您可能希望向用户提供反馈，以便他们知道正在编辑的行，例如，您的代码可能是

@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.AFECode)</td>
        <td>@Html.DisplayFor(modelItem => item.Remarks)</td>
        <td><a class="edit" href="#">edit</a></td>
    </tr>
}

$('.edit').click(function () {
    var row = $(this).closest('tr');
    row.toggleClass('isediting'); // add a style to highlight the row
    var isediting = row.hasClass('isediting');
    $(this).parent('td').siblings('td').prop('contenteditable', isediting);
    if (isediting) {
        $(this).text('update');
    } else {
        $(this).text('edit');
    }
})

@foreach（模型中的变量项）
{
@DisplayFor（modelItem=>item.AFECode）
@DisplayFor（modelItem=>item.Comments）
}
$（'.edit'）。单击（函数（）{
var行=$（this）.closest（'tr'）；
row.toggleClass（'isediting'）；//添加样式以高亮显示该行
var isediting=row.hasClass（'isediting'）；
$（this）.parent（'td'）.sibbines（'td'）.prop（'contenteditable'，isediting）；
如果（i编辑）{
$（this.text（'update'）；
}否则{
$（this.text（'edit'）；
}
})

但是请注意，这不是编辑模型的方法。为
for
循环中的所有元素生成表单控件，或在表单中使用
EditorTemplate
并提交给控制器方法（请参阅），或使用包含集合中一项表单的jquery对话框，单击“编辑”按钮时，将行数据传输到表单控件并使用ajax保存数据，如果成功，则更新行中的值。
您的
标记中有无效的html（重复的
id
属性。删除
onclick（）
并将
id=“edit\u link”
更改为
class=“edit\u link”
。脚本是
$（'.edit_link'）。单击（function（）{…}
，您可以使用
$（this）获取行。最近（'tr'））；
。但这有什么意义呢？您将如何提交值、执行验证等。为什么不遵循正常模式并使用弹出式表单/模式来编辑值？@StephenMuecke是对的。使用模式，或者在我看来，您也可以在
id=“fetch\u content\u id\u database”中从数据库获取内容id
@StephenMuecke谢谢它部分工作了，因为它使行可编辑，而不是其中的列！你能帮助我如何使行内的列也可编辑吗？@AhmerAliAhsan你能给我一个如何使用数据库id的例子吗？我想你已经得到了答案。我现在不在家，这就是为什么我不能向您展示如何从数据库中获取id。但我在这里提示您，使用ajax可以轻松完成此操作。非常感谢您的时间和解释。非常感谢您的注释。
@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.AFECode)</td>
        <td>@Html.DisplayFor(modelItem => item.Remarks)</td>
        <td><a class="edit" href="#">edit</a></td>
    </tr>
}

$('.edit').click(function () {
    var row = $(this).closest('tr');
    row.toggleClass('isediting'); // add a style to highlight the row
    var isediting = row.hasClass('isediting');
    $(this).parent('td').siblings('td').prop('contenteditable', isediting);
    if (isediting) {
        $(this).text('update');
    } else {
        $(this).text('edit');
    }
})