javascript - 如何使用jquery在MVC中制作可编辑的表格？

Question

我正在使用“数据库优先”方法构建我的第一个 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>

这是包含 edit() 函数的 Jquery 代码:-

function edit() {
    $("#my_table td").attr("ContentEditable") == "false" ? $("#my_table td").attr("ContentEditable", "true") : $("#my_table td").attr("ContentEditable", "false")
}

现在，我怎样才能只获得具有我单击的链接的可编辑行？
提前致谢

Answer 1

您的$("#my_table td")选择器选择全部 <td>元素，因此切换 contenteditable所有表格单元格的状态。由于重复 id，您还生成了无效的 html每个 <a> 中的属性元素。

避免行为和使用 Unobtrusive Javascript 污染您的标记，并使用相对选择器获取 <td>与链接关联的元素

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

$('.edit').click(function() {
    // to get the associated row
    var row = $(this).closest('tr');
    // or to get the associated cells
    var cells = $(this).closest('tr').children('td');
    // or just the sibling cells
    var siblings = $(this).closest('td').siblings('td');
});

没有理由添加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');
    }
})

但请注意，这不是编辑模型的方法。要么为 for 中的所有元素生成表单控件循环或使用 EditorTemplate在表单内并提交到 Controller 方法(请参阅 this example )或使用包含集合中一项的表单的 jquery 对话框，然后单击“编辑”按钮时，将行数据传输到表单控件并保存数据使用ajax，如果成功，则更新该行中的值。