Jquery 单击特定行的“编辑”后，标签将变成文本框

我试图在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>

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

我是mvc新手，对mvc了解不多，

---

我应该在jQuery中更改什么来修复它呢？

能否在每行中添加一个隐藏的文本框？然后单击行时，隐藏每个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>

@DisplayFor（modelItem=>item.Holiday\u Id）
@TextBox（modeleItem=>item.Holiday_Id，新的{style=“display:none；”}）
$（函数（）{
$（“.edit”）。单击（函数（）{
$（this）.parent（）.parent（）.children（“td>*：not（'label'）））.hide（）；
$（this.children（“输入”）.show（）；
});
});

检查

@html.DisplayFor（）生成的html

。除非您已经创建了自定义的

DiplayTemplate

，否则它不会将显示文本包装在

标记中，而这正是脚本试图使用

dad.find（'label'）.hide（）隐藏的内容

而是将显示文本包装在容器中

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

注意：当显示文本可见时，您可能还希望将其内容复制到输入中。
您的代码有两个问题。正如@Stephen Muecke
@Html.DisplayFor（）
所述，它不会生成
标记。在
dad.find（'input[type=“text”]”）中显示（）.focus（）
method
focus（）
对每个输入运行并将焦点设置为它，但上一个输入失去焦点并引发focusout（）事件（确切地说是隐藏它）。这就是为什么您只能编辑日期，因为它是最后一个输入，并且不会失去
focus（）
。我已经根据@Stephen Muecke修改模拟了你的情况，效果很好。你可以看到它
你能使用HTML5吗？元素上的contenteditable=true将使此工作正常。contenteditable=“true”不起作用。不明白，不让我编辑日期，行中的其他列不会更改为textboxesSorry。“标签”现在隐藏了吗？是的，我使用
或
@Html.TextBoxFor（modelItem=>item.Holiday_Id，new{style=“display:none；”更改为@Html.TextBoxFor（modelItem=>item.Holiday_Id，new{style=“display:none；”}）
是不相关的（你不应该使用
style=“display:none；”
，而是使用css最初隐藏文本框（文本框）。让我来编辑日期是什么意思？请注意，在显示显示文本时，还需要更改脚本的第二部分<代码>dad.find（'.displaytext'）.show（）

OP确实有

var-dad=$（this.parent（）focusout

事件：）是的，你是对的。你的回答完全正确。我将修改我的：）

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

<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
});