如何在JS函数中动态获取行索引，处理循环生成的qExpense输入框

一、修改JSP循环代码 #

给每个表单区域添加统一的容器类，让按钮能关联到当前行的输入框：

<c:forEach items="${allFilmsArray}" var="film" varStatus="status">
    <div class="film-form-row">
        <input type="text" name="qExpense" class="q-expense-input" placeholder="输入费用">
        <button onclick="checkInput(this)">验证费用</button>
    </div>
</c:forEach>

二、修改checkInput函数 #

通过按钮元素向上查找父容器，动态定位到当前行的输入框：

function checkInput(btn) {
    // 找到当前按钮所在行的输入框
    const expenseInput = btn.closest('.film-form-row').querySelector('.q-expense-input');
    const inputValue = expenseInput.value.trim();

    // 示例验证逻辑
    if (!inputValue) {
        alert('费用不能为空');
        expenseInput.focus();
        return false;
    }
    if (isNaN(inputValue) || parseFloat(inputValue) < 0) {
        alert('请输入有效的非负数字');
        expenseInput.focus();
        return false;
    }

    // 验证通过后的操作
    console.log('当前行费用验证通过：', inputValue);
    return true;
}

可选：无内联事件的优雅写法（事件委托） #

如果不想用内联onclick，可以用事件委托统一绑定：

JSP部分：

<c:forEach items="${allFilmsArray}" var="film" varStatus="status">
    <div class="film-form-row">
        <input type="text" name="qExpense" class="q-expense-input" placeholder="输入费用">
        <button class="expense-validate-btn">验证费用</button>
    </div>
</c:forEach>

JavaScript部分：

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('expense-validate-btn')) {
            const expenseInput = e.target.closest('.film-form-row').querySelector('.q-expense-input');
            const inputValue = expenseInput.value.trim();

            // 复用相同的验证逻辑
            if (!inputValue) {
                alert('费用不能为空');
                expenseInput.focus();
                return;
            }
            if (isNaN(inputValue) || parseFloat(inputValue) < 0) {
                alert('请输入有效的非负数字');
                expenseInput.focus();
                return;
            }

            console.log('当前行费用验证通过：', inputValue);
        }
    });
});

核心逻辑 #

不再硬编码输入框索引，而是利用DOM层级关系，通过点击的按钮定位到当前行的输入框，无论循环生成多少行，都能准确获取用户当前操作的输入值。

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