如何将产品ID传递至模态框，实现对应信息修改

看起来你遇到的核心问题是没有把当前点击的产品ID传递到模态框中，导致所有模态框加载的都是同一套内容。咱们一步步来修复：

1. 修正点击事件的绑定逻辑 #

你原来的代码绑定到#modifierlaMnt，但这个应该是模态框内的按钮？咱们需要把点击事件直接绑定到每个.icon-search图标上，这样才能捕获当前点击的产品ID：

// 使用事件委托，确保动态生成的表格元素也能触发事件
$(document).on('click', '.icon-search', function() {
    // 从父元素span的data属性中获取当前产品ID
    const productId = $(this).closest('span[data-maintenaceDetail]').data('maintenacedetail');
    // 把ID传入模态框初始化函数
    ModifMaintenance(productId);
    // 打开模态框并显示确认按钮
    $('#idModal').modal('show'); // 替换成你实际的模态框ID
    $('#validerLaMnt').show();
});

小提示：你HTML里的data-maintenaceDetail拼写少了个n（应该是data-maintenanceDetail），建议统一修正，避免后续取数据出问题。

2. 修改ModifMaintenance函数接收ID参数 #

原来的ModifMaintenance没有参数，现在让它接收产品ID，然后根据ID加载对应产品的维护信息：

function ModifMaintenance(productId) {
    // 方式1：通过AJAX请求后端接口获取对应ID的产品数据
    $.ajax({
        url: `/your-api-url/maintenance/${productId}`, // 替换成你的实际接口地址
        method: 'GET',
        success: function(data) {
            // 将返回的数据填充到模态框的表单/内容区域
            $('#modal-product-id').val(data.id);
            $('#modal-maintenance-desc').text(data.maintenanceContent);
            // 其他需要填充的字段同理
        },
        error: function() {
            alert('加载产品维护信息失败，请重试');
        }
    });

    // 方式2：如果数据已在页面上存储（比如td的data-detail属性），可以直接获取
    // const detailData = $(`#detail_maintenance_${productId}`).data('detail');
    // 再把detailData填充到模态框对应位置
}

3. 确保模态框内容动态更新 #

不要把模态框的内容写死在页面里，每次打开模态框前，先清空旧内容，再根据传入的ID填充新数据。如果使用Bootstrap模态框，还可以利用show.bs.modal事件做前置处理：

$('#idModal').on('show.bs.modal', function(event) {
    const currentId = $(this).data('current-id');
    // 这里可以再次确认并填充数据，防止缓存旧内容
});

额外优化建议 #

• 给模态框添加data-current-id属性，方便后续提交修改时快速获取当前产品ID：

  // 打开模态框时设置
  $('#idModal').data('current-id', productId);
  // 提交修改时获取
  const targetId = $('#idModal').data('current-id');
  

• 避免直接修改元素的display属性，尽量使用模态框组件自带的方法（比如Bootstrap的modal('show')/modal('hide')）来控制显示状态。

这样修改后，每次点击不同的搜索图标，都会把对应的产品ID传递到模态框，加载对应产品的专属信息，就能实现修改对应产品信息的功能了。

内容的提问来源于stack exchange，提问作者Marshe78