You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何结合Thymeleaf使用<input type="hidden" />?附列表迭代代码

正确在Thymeleaf中结合<input type="hidden" />的用法

首先看你代码里的核心问题:你把Thymeleaf的表达式直接写在了value属性的字符串里,这种写法不会被Thymeleaf解析,导致hidden input的value值就是字面的th:text='${job.id}',而不是实际的job ID。下面给你修正后的方案和细节说明:

核心修正逻辑

要正确绑定hidden input的值,你需要用Thymeleaf专属的th:value属性来绑定动态值,而不是把th:text塞进普通的value属性里。同时要确保hidden input属于当前迭代的<tr>行,这样每一行都能对应正确的job ID。

修正后的完整代码示例

<tbody>
    <th:block th:each="job, iterStat : ${listJob}">
        <tr class="job-detail" th:if="${job.status == 'success'}">
            <!-- 序号列:用span显示序号,同时在列内放置hidden input(hidden不会影响显示) -->
            <td>
                <span th:text="${iterStat.index + 1}"></span>
                <input type="hidden" name="id" th:value="${job.id}" />
            </td>
            <td th:text="${job.name}"></td>
            <td th:text="${job.time}"></td>
            <td>yyyy/mm/dd hh24/mi/ss</td>
            <td>yyyy/mm/dd hh24/mi/ss</td>
            <!-- 其他列内容 -->
        </tr>
    </th:block>
</tbody>

额外场景优化说明

  1. 批量提交多个ID:如果你的需求是批量提交多个job ID,建议把input的name改成ids[],这样后端可以直接用List<Integer>或对应集合类型接收:

    <input type="hidden" name="ids[]" th:value="${job.id}" />
    
  2. 灵活调整input位置:hidden input可以放在<tr>内的任意位置(比如最后一个列里,或者单独设置一个隐藏列),只要它在当前迭代的<tr>范围内,就会正确绑定当前job的属性值。

  3. 表单范围校验:一定要确保这些hidden input在<form>标签内部,否则表单提交时不会携带这些参数。

常见错误避坑

  • 绝对不要写value="th:text='${job.id}'":这种写法会让浏览器把th:text='${job.id}'当作普通字符串值,Thymeleaf完全不会解析它。
  • 确认Controller正确传值:要保证你在Controller里已经通过model.addAttribute("listJob", jobList);把列表数据传递到了视图,否则Thymeleaf无法获取到迭代的数据源。

内容的提问来源于stack exchange,提问作者Nguyen Hoang Vu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 07:11:25