Question

我有一个标签控件列表。在编辑时单击我想隐藏标签并显示文本框。我的标签在运行时获得了ID。

以下是我的观点 -

<script>

  $(document).ready(function () {
    $('#Edit').click(function () {
      hide label and show text control
    });

  });

</script>


<table>
  @for (var i = 0; i < Model.LogData.Count; i++)
  {
    <tr>
      <td>
        @Html.DisplayFor(m => m.LogData[i].BeginMiles)
      </td>
      <td>
        @Html.DisplayFor(m => m.LogData[i].EndMiles)
        @Html.TextBoxFor(m => m.LogData[i].EndMiles, new { @class   = "edit-input" })
      </td>
    </tr>
  }
</table>

<div class="col-xs-12" align="center">
  <input class="btn btn-default" type="button" id="exit" value="Exit">
  <input class="btn btn-default" type="button" name="Edit" value="Edit" id="Edit"  >

请帮我执行此功能。

Answer 1

我已经使用php为该函数生成了'div'和jQuery脚本。它已被组织起来以供重用。我认为它可能有所帮助

public bool Update(Employee employee)
{
    string query = "UPDATE EMPLOYEE SET NAME = @Name WHERE Id = @Id";
    var count = this.db.Execute(query, employee);
    return count > 0;
}

Answer 2

$("label").css("display", "none");
$("textarea").css("display", "block");

或

$("label").hide();
$("textarea").show();

第一种解决方案假设在您的初始样式中，您已将label设置为不显示（即：

label {
    display: block;
}

...和textarea相反（none）

将来，我建议在你问这个问题之前搜索一个问题，因为这是一个相对简单的问题，并且不会超过5分钟自己找到答案。
只是给未来的一个提示。

另外值得一提的是，此代码将适用于HTML中的所有label和textarea。要挑出单个元素或一组元素，请将id或class应用于元素（即：

<label id="yourid"></label>
<textarea class="yourclass"></textarea>

id对于元素是唯一的，因此没有2个元素可以具有相同的id个 class可以在元素之间共享，这是将元素组合在一起的一种方式

我假设当你说“文本框”时，你实际上是指textarea

要尝试获取您所说的label，请执行以下操作：

$("label[for='edit-input']").css("display", "none");

...希望选择具体的

Answer 3

我做了一个简单的例子。

HTML：

<label id="Label">hi</label>
<br/>
<input id="Text" type="text" class="hidden" />
<br/>
<button id="Edit">edit</button>

的CSS：

.hidden {
  display: none;
}

javasctipt：

$('#Edit').click(function() {
  $('#Label').hide();
  $('#Text').val('hi').show();
});

JS Fiddle

我希望这段代码可以帮助你。

Answer 4

@ wmash＆＃39; s answer几乎就是你想做的事情，你只需要在MVC生成的标签上添加一个Id。此外，您需要有一些方法来确定单击按钮时要切换的行。

以下是您用于生成HTML以修改以添加ID的代码：

@Html.DisplayFor(m => m.LogData[i].EndMiles, new { @Id = "lblEndMiles" + i })
@Html.TextBoxFor(m => m.LogData[i].EndMiles, new { 
    @Id = "txtEndMiles" + i, 
    @class = "edit-input" 
})

请注意，如果您愿意，可以将lblEndMiles和txtEndMiles更改为其他内容。

接下来，您需要更改编辑按钮。有两种方法可以做到这一点，一种是在每一行上都有一个切换该行的编辑按钮。另一个是选择＆＃34;选择＆＃34;编辑按钮影响的行。如果您选择行路径，则以下是单击处理程序的外观。

$(document).ready(function () {
  $('#Edit').click(function () {
    // get the selected row
    var selectedId = getSelectedRow();
    var lblId = "#lblEndMiles" + selectedId;
    var txtId = "#txtEndMiles" + selectedId;

    //hide and show the controls as in @wmash's answer
    $(lblId).hide();
    $(txtId).show();
  });
});

使行选择工作的一种快捷方法是向每行添加一个click事件，以删除＆＃34;选择＆＃34;来自其他每一行的类，并将其添加到单击的行中。

如果要一次切换所有标签和文本框，可以在每个标签和文本框中添加一个类，并使用classname和jquery进行切换。

@Html.DisplayFor(m => m.LogData[i].EndMiles, new { @class = "lblEndMiles" })
@Html.TextBoxFor(m => m.LogData[i].EndMiles, new { @class = "txtEndMiles edit-input" 
})

请注意，我选择lblEndMiles和txtEndMiles作为示例类名称，您可以自由更改它们。

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

    //hide and show the controls as in @wmash's answer
    $(".lblEndMiles").hide();
    $(".txtEndMiles").show();
  });
});

在MVC5 JQuery

4 个答案: