表中每个控件的唯一 ID答案

【问题标题】：Unique id for each control in table表中每个控件的唯一 ID
【发布时间】：2017-01-12 11:25:47
【问题描述】：

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

【问题讨论】：

你永远不会调用 updateSkillName。 HTML 标记有另一个未定义的函数updateName。你检查控制台了吗？当您单击“保存更改”时，您应该会看到一个错误。
对不起，我的例子被精简了一点，以减少不必要的项目。我已经更新了代码。 updateName() 被调用。
我建议避免此类错误并制作一个演示问题的 jsfiddle。
好主意，但我无法展示模型......我会努力的

标签： javascript jquery razor

【解决方案1】：

您必须使用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);
}

【讨论】：