javascript - 表中每个控件的唯一ID

标签 javascript jquery razor

我有一个表,其中包含模型中每个项目的单个输入控件。对于此示例,假设我的模型包含3个项目。我能够看到三行,每行包含一个输入和按钮控件。我能够单击编辑按钮,这将触发一个模式对话框,该对话框包含所单击行的输入控件的值。我可以在模式对话框中编辑此值,但不确定如何获取该更新值并更新所单击行的输入控件。我想我将需要为每行或每行中的输入控件一些唯一的标识符,以便依次更新该值。

主要形式

<form id="myForm">
  <table id="myTable">
    <thead>      
      <tr>
        <th>Column A</th>
      </tr>
    </thead>
    <tbody>
      @if (Model.Items.Count > 0)
      {
        for(int 1 = 0; i < Model.Items.Count(); i++)
        {
          <tr>
            <td>
              <div class="input-group">
                <input name="itemName" class="form-control" disabled="disabled" value="@Model.Items[1].Name">
                <span class="input-group-btn">
                  <button name="editItem" type="button" class="open-editItem btn btn-md btn-primary" data-toggle="modal" data-target="#editItem" title="edit item" data-id="@Model.Item[i].Name"><i class="fa fa-pencil"></i></button>
                </span>
              </div>
            </td>
          </tr>
        }
      }
    </tbody>
  </table>
</form>


模态弹出

<div id="editItem" class="modal fade in" tabindex="-1" role="dialog" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title"><i class="fa fa-pencil"></i> Item Name</h4>
      </div>
      <div class="modal-body">
        <label style="margin-right: 10px;">Item Name</label><input maxlength="100" style="width:100%;" type="text">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="closeEditItem btn btn-primary" data-dismiss="modal" id="btnSaveItem" onclick="updateName();">Save changes</button>
      </div>
    </div>
  </div>
</div>


我的JavaScript函数

<script type="text/javascript">
  $(document).on("click", ".open-editItem", function () {
    var item = $(this).data('id');
    $(".modal-body #editItem").val(item);
  });  

  function updateName() {
    var updatedItemName = $(".modal-body #editItemName").val();
        alert(updatedItemName);
        $(".input-group #itemName").val(updatedItemName);  // not working, is there a better or different way?
    }
</script>

最佳答案

您必须使用window对象才能使用global变量。

Global变量是窗口对象的属性。

另外,我使用closest方法来保留对其进行调用的控制。

那是最终代码:

$(document).on("click", ".open-editItem", function () {
   window.input=$(this).closest('.input-group').find('input');
   var item = $(this).data('id');
   $(".modal-body #editItem").val(item);
});
function updateName() {
    var updatedItemName = $(".modal-body").find('input').val();
       alert(updatedItemName);
       $(window.input).val(updatedItemName);
}

关于javascript - 表中每个控件的唯一ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41601608/

相关文章:

javascript - 使用jQuery datepicker格式化日期

javascript - 从 jquery 的 eventData 对象获取错误信息

javascript - javascript click(功能)更改颜色按钮

c# - MVC 创建已配置的空 mvc 项目

asp.net - Razor View 无法识别 @model 或 Lambda @Html 方法

c# - 在 asp.net mvc4 中动态添加 DisplayName 属性

javascript - 如何在命令行中运行/调试 javascript

javascript - 提交按钮的行为间歇性

jquery - ID无法使用jQuery

javascript - 如何基于属性(例如类别)从同名组中选择跨度