Thymeleaf th:each循环如何实时计算列表年龄输入值总和

你的代码求和失效是几个低级错误导致的：

• 所有循环生成的年龄输入框都用了同一个id="age"，HTML规定id在页面中必须唯一，jQuery的#id选择器只会匹配到第一个符合条件的元素，后续所有输入框都无法被选中绑定事件、也无法被遍历取值
• 结果赋值目标错误：展示总和的输入框id是total，你代码里往#sum元素写值，根本匹配不到目标；而且input是表单元素，填充内容要用val()方法，html()对input无效
• 控制台日志写法错误：log.console是错误写法，正确写法为console.log，且你写日志的位置sum是calculateSum的内部变量，外部访问会直接报未定义错误
• 额外隐患：年龄输入用type="text"允许输入任意非数字字符，容易导致求和计算异常

1. Thymeleaf模板部分 #

把重复id替换为统一class做选择器，优化输入限制：

<tr th:each="person : ${persons}">
    <td th:text="${person.first_name}"></td>
    <td th:text="${person.last_name}"></td>
    <td th:text="${person.phone}"></td>
    <td>
        <input class="form-control age-input"
               type="number" min="0" name="age" th:field="*{ages}">
    </td>
</tr>

Total : <input type="text" name="total" id="total" readonly/>

给总和输入框加readonly避免用户手动篡改统计值；年龄输入改为number类型，从输入层过滤非数字、负数值，输入过程中空值不会被计入求和，刚好符合你说的“输入第5条时自动统计前4条已输入值合计”的效果——第5条没输入有效值前不会被算入总和。

2. JavaScript部分 #

替换原有脚本，用class选择器匹配所有输入框，修正事件绑定和赋值逻辑：

<script type="text/javascript">
$(document).ready(function(){
    // 给所有年龄输入框绑定实时输入监听
    $(".age-input").on('input', calculateSum);
    // 页面加载完成先算一次初始值
    calculateSum();
});

function calculateSum() {
    let sum = 0;
    $(".age-input").each(function() {
        const val = $.trim($(this).val());
        if (!isNaN(val) && val.length !== 0) {
            sum += parseFloat(val);
        }
    });
    // 给总和输入框赋值
    $("#total").val(sum.toFixed(2));
}
</script>

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