How to make an editable table in MVC using jquery?

Question

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:-

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

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

Here is the HTML code :-

<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:-

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

Answer 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.

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

<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

@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.