Bootstrap模态框选择ID后自动填充Name字段的实现问题

你只需修改现有JavaScript逻辑，补充获取对应Name值并填充到输入框的逻辑即可实现需求，具体修改如下：

最小改动方案（直接修改原有函数） #

将你的JavaScript代码替换为下方内容：

function openmodal(input) {
  $('#myModal').modal('show');
  $(".hello").unbind().click(function(event){
      // 填充选中的ID到触发弹窗的输入框
      $(input).val($(this).attr("data-id"));
      // 获取当前行对应的Name值：当前点击的ID链接父级td的下一个td的文本内容
      const relatedName = $(this).parent().next('td').text();
      // 填充Name到对应输入框
      $('input[name="name"]').val(relatedName);
      // 关闭模态框
      $('#myModal').modal('hide');
  });
}

如果后续你调整了表格的列顺序，建议给Name列的td添加自定义类名（比如class="name-cell"），然后将获取Name的逻辑改为$(this).closest('tr').find('.name-cell').text()，兼容性更强。

可选优化方案（避免重复绑定事件） #

原有逻辑每次打开模态框都会执行解绑、绑定事件的操作，多次打开会产生冗余操作，你可以用事件委托的方式优化性能：

// 页面加载完成后一次性绑定事件
$(document).ready(function() {
  // 存储当前触发模态框的ID输入框对象
  let currentIdInput = null;
  // 事件委托绑定ID链接点击事件
  $(document).on('click', '.hello', function() {
    if (!currentIdInput) return;
    $(currentIdInput).val($(this).data('id'));
    $('input[name="name"]').val($(this).parent().next('td').text());
    $('#myModal').modal('hide');
    currentIdInput = null;
  });
})

function openmodal(input) {
  // 记录当前触发弹窗的输入框
  currentIdInput = input;
  $('#myModal').modal('show');
}

内容的提问来源于stack exchange，提问作者Jije's Stackoverflow