使用mvc4对表进行行编辑

Question

我正在从数据库生成HTML表。我希望能够编辑表中的行来更新每行代表的数据。这是我的表格的样子：

<table id="studenttable">
    <thead>
        <tr>
            <th>ClassId</th>
            <th>StudentId</th>
            <th>ClassName</th>
            <th>StudentName</th>
            <th>Address</th>
            <th colspan="3">process</th>
        </tr>

    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr class="studenttable1">

                <td id="tdclassid.classid">
                    @Html.TextBox("classid", @item.classid, new { id = "txtclassid", @readonly = "readonly" })
                </td>

                <td id="tdstudentid">
                    @Html.TextBox("studentid", @item.studentid, new { id="txtstudentid", @readonly="readonly" })
                </td>

                <td id="tdclassname">
                    @Html.TextBox("classnama", @item.studentname, new { id="txtclassname",@readonly="readonly"})
                </td>

                <td id="tdstudentname">
                    @Html.TextBox("studentname", @item.classname, new { id="txtstudentname", @readonly="readonly" })                    
                </td>

                <td id="tdaddress">
                    @Html.TextBox("address", @item.address, new { id="txtaddress", @readonly="readonly" })
                </td>

                <td class="tdedit">
                    <a href="#" id="anchoredit" onclick="insertRowq()">edit</a>  |
                    <a href="#" id="anchordelete" onclick="insertRowq()">done</a>
                </td>

                <td id="tddetails">
                     @Html.ActionLink("details", "Index", null, null, new { @class = "actdetails" })
                </td>

            </tr>
        }

    </tbody>
</table>

当您单击编辑按钮时，我使用jQuery使文本输入可编辑：

$(document).ready(function () {
    $('#anchoredit').click(function () {

        $('#txtclassid').attr("readonly", false);
        $('#txtstudentid').attr("readonly", false);
        $('#txtclassname').attr("readonly", false);        
        $('#txtstudentname').attr("readonly", false);
        $('#txtaddress').attr("readonly", false);

        $('#txtclassid').addClass("addclassid");
        $('#txtstudentid').addClass("addclassid");
        $('#txtclassname').addClass("addclassid");
        $('#txtstudentname').addClass("addclassid");
        $('#txtaddress').addClass("addclassid");

    });
});

输出

我使用foreach循环绑定表中的数据，但这仅适用于第一行;如果我点击第二行它不起作用。我可能会在哪里出错，我怎样才能让这项工作像我希望的那样？

Answer 1

你需要指定行，我认为在js中使用类而不是像这样的id会更好

$(document).ready(function () {
    $('.anchoredit').click(function () {
        var row = $(this).parent().parent();
        row.find('.yourtextboxclass').attr("readonly", false).addClass("addclassid");
    });
});

或

$(document).ready(function () {
    $('.anchoredit').click(function () {
        var row = $(this).parent().parent();
        row.find('input').attr("readonly", false).addClass("addclassid");
    });
});

你也必须更改用类而不是id或id

创建TextBoxt的Html

<强>更新 隐藏上一个
由于在编辑下一个varian之前没有保存该值，只需禁用编辑

$(document).ready(function () {
    $('.anchoredit').click(function () {
        var row = $(this).parent().parent();
        var table = row.parent();
        table.find('input.addclassid').removeClass(".addclassid").attr("readonly", true)
        row.find('input').attr("readonly", false).addClass("addclassid");
    });
});

但此变体不会返回编辑的值