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

Question

我有一个表，其中包含模型中每个项目的单个输入控件。对于此示例，我们假设我的模型包含 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>

Answer 1

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

全局变量是窗口对象的属性。

此外，我使用了 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);
}