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

I am building my first MVC application using "database first" approach, everything works fine, however, I'm stuck at the point of using jQuery to make the MVC tables editable (inline), every row has a link when I click on that link, the scenario should be as follows:-

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

1-click on the link in a specific row
2-get this specific row editable

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

the problem is as follows :-
1-when I click on the link of a specific row
2-all rows become editable !!!

问题如下: - 1 - 当我点击特定行2的链接时 - 所有行都变得可编辑!

Here is the HTML code :-

这是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>

Here is the Jquery code including edit() function:-

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

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

Now , how can i only get the row that has the link i clicked on to be editable?
thanks in advance

现在,我怎么才能得到我点击的链接可以编辑的行?提前致谢

1 个解决方案

#1

Your $("#my_table td") selector selects all <td> elements and therefore toggles the contenteditable state of all table cells. Your also generating invalid html because of duplicate id attributes in each <a> element.

您的$(“#my_table td”)选择器选择所有元素,因此切换所有表格单元格的可满足状态。由于每个元素中的重复id属性,您还会生成无效的html。

Avoid polluting your markup with behavior and use Unobtrusive Javascript, and use relative selectors to get the <td> elements associated with the link

避免使用行为污染标记并使用Unobtrusive Javascript,并使用相对选择器来获取与链接关联的元素

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

There is no reason to add contenteditable initially, and you will probably want to provide feedback to the user so that they know which row they are editing, for example, your code could be

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

Note however this is not the way to edit your model. Either generate form controls for all elements in a for loop or using an EditorTemplate inside a form and submit to controller method (refer this example) or use a jquery dialog containing a form for one item in your collection, and when clicking the 'edit' button, transfer the rows data to the form controls and save the data using ajax, and if successful, update the values in the row.

但请注意,这不是编辑模型的方法。为for循环中的所有元素生成表单控件或在表单内使用EditorTemplate并提交到控制器方法(请参阅此示例)或使用包含集合中某个项目的表单的jquery对话框,以及单击“编辑”时按钮,将行数据传输到表单控件并使用ajax保存数据,如果成功,则更新行中的值。

#1