jquery - 单击编辑特定行时，标签将变为文本框

Question

我正在尝试在 MVC 中开发一个功能齐全的 Gridview，数据显示在 gridview 中，但我想在同一页面上编辑一行，即当我单击编辑超链接时，该行应该变成文本框。

这是我的 html 代码

<table>
    <tr>
        <th>
            @Html.Label("ID") 
        </th>
        <th>
            @Html.Label("Name")
        </th>
        <th>
            @Html.Label("Description")
        </th>
        <th>
             @Html.Label("Date")
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            <input type="text"  class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Id)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Name)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Description)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_date)
        </td>
        <td>
            <a class="edit" href="#">Edit</a> |
           @* @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |*@
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

我的 jQuery

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function() {
        $('a.edit').click(function () {
            var dad = $(this).parent().parent();
            dad.find('label').hide();
            dad.find('input[type="text"]').show().focus();
        });

        $('input[type=text]').focusout(function() {
            var dad = $(this).parent();
            $(this).hide();
            dad.find('label').show();
        });
        });
    </script>
}

和我的文本框 CSS

.edit-input {
    display:none;
}

但是当我执行屏幕时我喜欢这样

我是mvc新手，对此了解不多，我应该在 jQuery 中更改什么来修复它？

Answer 1

检查@Html.DisplayFor()生成的html 。除非您创建了自定义 DiplayTemplate它不会将显示文本包装在 <label> 中您的脚本试图使用 dad.find('label').hide(); 隐藏的标记.

相反，将显示文本包装在容器中

<td>
  <input type="text"  class="edit-input" />
  <div class="displaytext">
    @Html.DisplayFor(modelItem => item.Holiday_Id)
  </div>
</td>

并将脚本调整为

....
$('a.edit').click(function () {
  var dad = $(this).parent().parent();
  dad.find('.displaytext').hide(); // change this
  dad.find('input[type="text"]').show().first().focus();
});

$('input[type=text]').focusout(function() {
  var dad = $(this).parent();
  $(this).hide();
  dad.find('.displaytext').show(); // and this
});

请注意，当您使其可见时，您可能还希望将显示文本的内容复制到输入中。