本文介绍如何在 Thymeleaf 中利用 iterStat 状态变量控制循环节奏，实现在 <table> 中每行渲染 5 个产品（如复选框），避免默认单列垂直排列，提升表格布局灵活性与可读性。

本文介绍如何在 thymeleaf 中利用 `iterstat` 状态变量控制循环节奏，实现在 `

` 中每行渲染 5 个产品（如复选框），避免默认单列垂直排列，提升表格布局灵活性与可读性。

在 Thymeleaf 模板中，默认使用 th:each 进行集合遍历时，每个迭代项会生成一个独立的 <tr>，导致所有元素垂直堆叠。若需实现“每行 5 列”的网格化表格布局（例如批量选择商品），关键在于动态控制 <tr> 的启闭时机——即：每输出 5 个 <td> 后插入新 <tr>，而非为每个元素新建一行。

Thymeleaf 提供内置的迭代状态对象 iterStat（全称 iterationStatus），它自动绑定在 th:each 表达式中，包含如下常用属性：

• iterStat.index：从 0 开始的索引（0, 1, 2…）
• iterStat.count：从 1 开始的计数（1, 2, 3…）
• iterStat.size：集合总长度
• iterStat.first / iterStat.last：是否为首个/末尾元素
• iterStat.even / iterStat.odd：是否为偶数/奇数位置

要实现「每行 5 个」，核心逻辑是：当当前计数 count 对 5 取模结果为 4（即第 5、10、15…个元素，对应 count=5,10,15... → count % 5 == 0？注意：count 从 1 开始！），且不是最后一个元素时，在当前 <tr> 内部主动闭合并开启新 <tr>。

✅ 正确写法如下（使用 <th:block> 避免生成无效 HTML 标签）：

<table border="1">
  <tr th:each="product, iterStat : ${data}">
    <td>
      <input type="checkbox" 
             name="productCode" 
             th:value="${product.productCode}" 
             th:text="${product.productName}" />
    </td>
    <!-- 每满5个（count=5,10,15...）且非末尾时，结束当前tr并开始新tr -->
    <th:block th:if="${iterStat.count % 5 == 0 and !iterStat.last}">
      </tr><tr>
    </th:block>
  </tr>
</table>

⚠️ 注意事项：

• 使用 iterStat.count % 5 == 0（而非 == 4）更直观：count=5 是第 5 个，5 % 5 == 0；原答案中 count % 5 == 4 实际对应 index % 5 == 4（因 count = index + 1），虽逻辑等价但易引发理解偏差，推荐统一用 count 配 == 0。
• 必须添加 and !iterStat.last 条件，否则末尾会多出一个空 <tr>，破坏表格结构。
• <th:block> 是 Thymeleaf 的逻辑容器，不渲染为实际 DOM 元素，适合插入条件性 HTML 片段。
• 若数据量不足 5 的倍数（如 12 条），最后一行将自动包含剩余 2 个 <td>，无需额外处理。

? 扩展建议：
如需响应式栅格或更复杂布局（如带表头、分组、悬停样式），建议结合 CSS Grid 或 Flexbox 替代表格语义；但对简单后台管理界面中的批量操作控件，上述 Thymeleaf 方案简洁高效、兼容性强，是模板层控制渲染节奏的经典实践。