javascript - How to make an editable table in MVC using jquery? - Stack Overflow

admin管理员组

文章数量:1336632

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

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

• javascript
• jquery
• html
• asp-mvc

Share Improve this question Follow asked Jul 13, 2016 at 12:36 MedoMedo 11111 gold badge22 silver badges1010 bronze badges 9

• 2 You have invalid html (duplicate id attributes in your <a> tag. Remove onclick() and change id="edit_link" to class="edit_link". The the script is $('.edit_link').click(function() { ..... } and you can get the row using $(this).closest('tr');. But what would be the point of this How would you submit the values, perform validation etc. etc. Why not follow normal patterns and use a popup form/modal to edit the values? – user3559349 Commented Jul 13, 2016 at 12:44
• @StephenMuecke is right. Use modal or in my point of view you also do that with fetching content id from database in id="fetch_content_id_database" – Ahmer Ali Ahsan Commented Jul 13, 2016 at 12:48
• @StephenMuecke thank you it is partially working since it makes the row editable not the columns inside of it! can you help me how i can make the columns inside of the row editable too? – Medo Commented Jul 13, 2016 at 12:56
• @AhmerAliAhsan can you please give me an example on how to use database id? – Medo Commented Jul 13, 2016 at 12:57
• 1 I think you got your answer. I am not at home right now that's why I am unable to show you how to get id from database. But I give you hint here using ajax you can do this easily. – Ahmer Ali Ahsan Commented Jul 13, 2016 at 13:07

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptHow to make an editable table in MVC using jqueryStack Overflow