将表格行数据加载至Bootstrap Modal：无法获取图片及数据回显失败问题

问题原因 #

1. 模态框无法填充数据的原因 #

• 你当前用$tr.children("td").map()的方式获取数据，虽然逻辑上索引是对的，但如果表格结构有调整很容易出现索引偏移，另外你按钮的data-target属性为空，可能和bootstrap内置的模态框触发逻辑冲突，导致赋值后模态框被重新初始化清空。
• 如果你控制台已经能打印出正确的data数组但填充失败，也可以检查页面是否存在重复的title/quantity/size id，导致jQuery选中了错误的元素赋值。

2. 无法获取表格行图片资源的原因 #

• 你用$(this).text()获取td内容，图片所在的td里只有<img>标签，没有文本内容，所以拿不到图片路径；另外出于浏览器安全限制，你无法给type="file"的输入框预设文件值，所以直接给图片输入框赋值是不可能实现的。

解决方案 #

步骤1：修改模态框代码，新增原有图片预览和隐藏字段 #

在模态框的图片上传区域下方添加原有图片预览和存储旧图片名的隐藏域，避免用户不更换图片时丢失原有图片信息：

<div class="row g-3 align-items-center mt-0">
    <div class="col-auto">
        <label for="image" class="col-form-label">Image</label>
    </div>
    <div class="col-auto ms-3">
        <input type="file" id="image" name="image" class="form-control">
        <!-- 新增原有图片预览区域 -->
        <div class="mt-2">
            <span>原有图片：</span>
            <img id="old_img_preview" style="max-width: 120px;max-height: 120px;vertical-align: middle;margin: 0 10px;" alt="原有图片">
            <input type="hidden" id="old_image_name" name="old_image_name">
        </div>
    </div>
</div>

步骤2：修改表格的Update按钮属性 #

将按钮的data-target属性补全，避免bootstrap事件冲突：

<button type="button" class="btn btn-sm editbtn btn-primary" data-toggle="modal" data-target="#editmodal">Update</button>

步骤3：替换原有JS代码，优化数据获取和填充逻辑 #

直接按td索引精准获取对应字段，同时提取图片路径和文件名：

$(document).ready(function(){
    $('.editbtn').on('click', function(){
        const $tr = $(this).closest('tr');
        // 逐字段获取数据，避免索引偏移问题
        const title = $tr.find('td:eq(0)').text().trim();
        const quantity = $tr.find('td:eq(1)').text().trim();
        const size = $tr.find('td:eq(2)').text().trim();
        // 获取图片资源
        const $img = $tr.find('td:eq(3) img');
        const imgFullSrc = $img.attr('src');
        const oldImgName = imgFullSrc.split('/').pop(); // 提取图片文件名

        // 填充模态框表单
        $('#title').val(title);
        $('#quantity').val(quantity);
        $('#size').val(size);
        $('#old_img_preview').attr('src', imgFullSrc);
        $('#old_image_name').val(oldImgName);

        // 弹出模态框
        $('#editmodal').modal('show');
    });
});

额外优化建议 #

• 你当前的图片src用的是本地磁盘绝对路径C:/xxx，项目部署到服务器后用户端无法正常访问，建议改为相对于web应用根目录的路径，比如/Ecommerce/images/<%=res.getImage()%>。
• 后台更新接口逻辑调整：如果上传的新图片为空，就用old_image_name参数的值作为产品的图片字段值，不需要修改原有图片记录。

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