文件上传行内元素更新异常求助：第二行上传修改第一行内容

问题根源 #

1. 重复ID冲突：你的<c:forEach>循环生成了多份相同ID的元素（name、color、colors、image），HTML中ID必须全局唯一，导致JS通过document.getElementById()只会找到第一行的匹配元素。
2. 表格结构错误：将<thead>放在循环内部，会生成多个表头，不符合表格规范。
3. DOM元素定位错误：原JS中用prev('label')获取标签，但label在文件输入框的后方，应该用next()而非prev()。
4. 文件名提取逻辑脆弱：固定截取第12位后的字符串，无法适配不同长度的文件路径。

修改后的代码 #

JSP部分

<form action="Fruits" method="Post" enctype="multipart/form-data">
    <table id="myTable">
        <!-- 表头移出循环，只保留一份 -->
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${fruits}" var="val" varStatus="count">
                <tr>
                    <!-- 用class替代重复id，避免冲突 -->
                    <td><input type="text" name="name" class="name" value="${val.name}"></td>
                    <td>
                        <select class="form-control dropdown color" name="color">
                            <option class="colors">${val.color}</option>
                        </select>
                        <input type="file" class="image" value="image"/>
                        <label class="upload-label">Upload</label>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <button type="button" class="btn btn-default json-editor-btn-add" onclick="myFunction()">Add</button>
</form>

JS部分

$(function () {
    $('input[type=file]').change(function () {
        var $currentInput = $(this);
        var filePath = $currentInput.val();
        // 从路径中提取文件名，兼容Windows和类Unix系统路径
        var fileName = filePath.substring(filePath.lastIndexOf('\\') + 1);
        var labelText = 'File : ' + fileName;
        
        // 定位到当前行的colors选项，更新文本
        $currentInput.closest('tr').find('.colors').text(fileName);
        // 更新当前输入框对应的标签文本和样式
        $currentInput.next('.upload-label').text(labelText).css("color", "black");
    });
});

核心修改说明 #

• 唯一标识替换：将重复的id属性改为class，避免全局ID冲突问题。
• 相对DOM定位：通过closest('tr')找到当前文件输入所在的表格行，再用find('.colors')定位该行内的目标元素，确保只修改当前行的内容。
• 修正标签获取：用next('.upload-label')替代prev('label')，正确获取文件输入框后方的标签元素。
• 健壮文件名提取：使用lastIndexOf('\\')动态截取文件名，适配不同系统的文件路径格式。

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