Javascript 表中每个控件的唯一id

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

A列
@如果（Model.Items.Count>0）
{
对于（int 1=0；i

模态弹出窗口

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

$（文档）。在（“单击”，“打开编辑项”，函数（）{
var item=$（this.data（'id'）；
$（“.modal body#editItem”）.val（项目）；
});  
函数updateName（）{
var updateItemName=$（“.modal body#editItemName”）.val（）；
警报（updatedItemName）；
$（“.input group#itemName”）.val（UpdateItemName）；//不起作用，有更好的或不同的方法吗？
}

必须使用

窗口

对象才能使用

全局

变量

Global

变量是窗口对象的属性

另外，我使用了

最近的
方法来保留调用它的控件

这是最终代码：

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

你从来不叫updateSkillName。HTML标记还有另一个未定义的函数updateName。你检查控制台了吗？当您单击“保存更改”时，应该会看到一个错误。对不起，为了减少不必要的项目，我的示例略作删节。我已经更新了代码。updateName（）已被调用。我建议避免此类错误，并制作一个JSFIDLE来演示问题。好主意，但我将无法显示模型……我将处理这个问题