Question

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

单击特定行中的链接
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元素中存在重复的<a>属性，您还会生成无效的html。

避免使用行为污染您的标记并使用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并提交到控制器方法（请参阅this example）或使用包含一个表单的表单的jquery对话框在您的收藏中，以及点击“编辑”时按钮，将行数据传输到表单控件并使用ajax保存数据，如果成功，则更新行中的值。

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

1 个答案: