标签在单击编辑特定行时变为文本框答案

【问题标题】：Labels become textboxes on click edit of specific row标签在单击编辑特定行时变为文本框
【发布时间】：2014-12-17 20:18:12
【问题描述】：

我正在尝试在 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 中更改什么来修复它？

【问题讨论】：

vitalets.github.io/x-editable/demo-bs3.html
你会使用 HTML5 吗？元素上的 contenteditable=true 将使这项工作。
contenteditable="true" 不起作用

【解决方案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
});

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

【讨论】：

它只是让我编辑日期，一行中的其他列不会变成文本框
对不起，不明白。 “标签”现在隐藏了吗？
是的，我将更改为 @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style = "display: none;" })
使用<input type="text" class="edit-input" />或@Html.TextBoxFor(modelItem => item.Holiday_Id, new { style="display: none;" })是无关紧要的（你不应该使用style="display: none;"，而应该使用css来隐藏文本框文本框）。 它只是让我编辑日期是什么意思？
请注意，当您显示显示文本时，您需要更改脚本的第二部分。 dad.find('.displaytext').show();

【解决方案2】：

你能在每一行中添加一个隐藏的文本框吗？然后当你点击行的时候，隐藏每个td的内容，但是显示文本框？

<td>

            @Html.DisplayFor(modelItem => item.Holiday_Id)
           @Html.TextBox(modelItem => item.Holiday_Id, new{style="display:none;"})
        </td>

<Script>
   $(function(){
    $(".edit").click(function(){
       $(this).parent().parent().children("td > * :not('label')").hide();
       $(this).children("input").show();
    });

   });
</script>

【讨论】：

【解决方案3】：

您的代码有两个问题。正如@Stephen Muecke 所提到的，@Html.DisplayFor() 不会生成<label> 标签。而在dad.find('input[type="text"]').show().focus(); 方法focus() 为每个输入运行并为其设置焦点，但前一个输入失去焦点并引发它focusout() 事件（完全隐藏它）。所以你只能编辑日期，因为它持续输入并且不要丢失focus()。我已经根据@Stephen Muecke 的修改模拟了您的情况，并且效果很好。可以看here

【讨论】：

OP 实际上有var dad = $(this).parent(); 用于focusout 事件:)
是的，你是对的。你的答案是完全正确的。我会修改我的:)