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对象才能使用全局变量。

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

此外,我使用了 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/

相关文章:

jquery - 在单独的文件中使用带有 HTML 的 Jquery 将 Html 列表转换为选择

javascript - 引用 View 文件夹中的 JavaScript 文件 - MVC 5

javascript - 未捕获错误 : Syntax error, 无法识别的表达式:悬停

javascript - 为什么ajax不将我重定向到另一个html页面?

c# - Razor 删除了资源文件中的新行,有什么办法可以保留它?

asp.net-mvc - ASP.NET MVC中的Razor页面生命周期

javascript - 如何在 React Native 中登录和注销后在 2 个不同的导航器之间导航

javascript - 如何使用 Firefox 扩展将 JavaScript 函数注入(inject)所有网页

javascript - 单击后 HTML 按钮不再出现

javascript - 函数在 Chrome 中运行但在 Firefox 中不运行说函数未定义