本文详解如何修复表格内多个“查看”按钮只能打开第一个模态框的常见问题，通过将重复 id 改为函数调用 + 唯一参数传递，并配合事件解耦与动态数据加载，实现每行独立弹出正确内容的模态框。

在使用 Bootstrap 模态框（Modal）配合动态渲染的 HTML 表格时，一个高频问题是：所有操作按钮点击后，均只触发同一个（通常是第一个）模态框，且展示的数据始终是首行数据。根本原因在于你使用了重复的 id="getData" —— HTML 规范要求 id 全局唯一，而 jQuery 的 $("#getData") 选择器只会匹配第一个匹配元素，导致后续按钮完全失效。

✅ 正确做法：移除重复 ID，改用事件委托 + 函数传参

首先，修改表格中每行的按钮写法，删除 id="getData"（避免重复），改为内联调用带参数的 JavaScript 函数：

<td>
  <a href="javascript:void(0)" 
     onclick="getData({{ $merchant->id }})" 
     class="btn btn-info">Show</a>
</td>

? 提示：{{ $merchant->id }} 是 Laravel Blade 语法，确保输出为纯数字（如 123），避免引号包裹（即不要写成 '{{ $merchant->id }}'），否则 JS 会将其识别为字符串而非数值，可能影响后续接口请求。

✅ 模态框结构保持不变（推荐复用单个 Modal）

无需为每行生成独立模态框，复用一个

更高效、易维护。只需确保其内部占位元素（如

）能被动态更新：

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Merchant Details</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p><strong>ID:</strong> <span id="id"></span></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
        <p><strong>Name:</strong> <span id="first_name"></span></p>
        <p><strong>Email:</strong> <span id="email"></span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

✅ 注意：将 p#id 等改为 span 更语义化；同时补充 #email 字段以匹配后端返回结构。

✅ JavaScript 逻辑重构：独立函数 + 动态 AJAX 请求

将点击逻辑抽离为具名函数 getData(id)，并确保使用正确的路由和数据处理方式：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<script type="text/javascript">
  // 确保 Bootstrap 5 的 Modal JS 已加载（依赖 Popper.js 和 Bootstrap JS）
  function getData(id) {
    // 清空上一次残留内容，防止旧数据残留
    $('#id').empty();
    $('#first_name').empty();
    $('#email').empty();

    // 显示模态框（Bootstrap 5 写法）
    const myModal = new bootstrap.Modal(document.getElementById('myModal'));
    myModal.show();

    // 发起 AJAX 请求（推荐使用 Laravel 命名路由）
    $.ajax({
      type: 'GET',
      url: "{{ route('merchants.show') }}", // ✅ 替换为你的实际命名路由
      data: { id: id },
      dataType: 'json',
      success: function (response) {
        // 安全赋值：检查字段是否存在
        $('#id').text(response.id || 'N/A');
        $('#first_name').text(response.first_name || 'N/A');
        $('#email').text(response.email || 'N/A');
      },
      error: function (xhr) {
        console.error('AJAX Error:', xhr.responseJSON?.message || xhr.statusText);
        alert('Failed to load merchant data. Please check console.');
      }
    });
  }
</script>

? 关键改进点：

• 使用 bootstrap.Modal 实例化（Bootstrap 5+ 推荐方式），避免 $('#myModal').modal('show') 在新版中失效；
• 请求前清空 DOM 内容，防止跨行数据污染；
• success 中使用 .text() 而非 .html()，防止 XSS 风险；
• 添加 error 回调，便于快速定位后端路由/权限/JSON 格式问题。

⚠️ 常见陷阱与注意事项

• ❌ 不要使用 id 绑定多元素事件：$("#getData").click(...) 永远只绑定第一个元素；

• ✅ 推荐进阶方案（事件委托）：若表格支持动态增删行，应改用事件委托：

  $(document).on('click', '[data-action="show-merchant"]', function() {
    const id = $(this).data('id');
    getData(id);
  });

  对应按钮写法：Show

• 后端响应格式必须为 JSON，且字段名与前端 response.xxx 严格一致（如 first_name 而非 firstName）；

• 确保 CSRF Token 已注入（Laravel 中通常已自动包含在 axios 或 $.ajaxSetup 中）；

• 检查浏览器控制台（F12 → Console）是否有 404（路由错误）、500（服务端异常）或 CORS 报错。

✅ 总结

修复“表格中仅首个模态框生效”的本质，是摒弃基于重复 id 的硬编码绑定，转向参数化函数调用 + 单模态框动态填充的设计模式。它不仅解决了当前问题，还提升了代码可维护性、安全性与扩展性。只要确保路由可达、数据结构一致、DOM 更新及时，每一行都能精准弹出属于自己的完整信息。