Thymeleaf中th:each遍历子标签无法获取值的问题求助

在Thymeleaf模板中使用th:each遍历数组时遇到异常：Java代码将int数组days存入Model，HTML代码在<tr>标签上通过th:each="day : ${days}"遍历，直接在该<tr>下的<p>标签可正常获取${day}值，但嵌套在内部<tr>里的<td>标签无法读取该变量。

相关代码及输出 #

Java代码 #

int[] days = {Integer.valueOf(tokens[2])};

model.addAttribute("days", days);

HTML代码 #

<tr th:each="day : ${days}">
    <p th:text="${day}"></p>
    <p th:text="${dayStat.index}"></p>
    <tr>
        <td th:text="${day}"></td>
    </tr>
</tr>

实际浏览器页面源码 #

<tr>
    <p>28</p>
    <p>0</p>
    <tr>
        <td></td>
    </tr>
<tr>

预期浏览器页面源码 #

<tr>
    <p>28</p>
    <p>0</p>
    <tr>
        <td>28</td>
    </tr>
<tr>

问题原因及解决办法 #

原因 #

HTML表格的标准结构不允许<tr>直接嵌套<tr>，浏览器会自动修正这种非法DOM结构，将内部的<tr>移动到外部<tr>的同级位置。这导致内部<tr>脱离了th:each的作用域，因此无法访问${day}变量。

解决办法 #

使用合法的表格嵌套结构，两种常见方案：

方案1：用<tbody>实现逻辑分组

如果是需要对行进行逻辑分组，可将内部行放入<tbody>标签：

<tr th:each="day : ${days}">
    <p th:text="${day}"></p>
    <p th:text="${dayStat.index}"></p>
    <tbody>
        <tr>
            <td th:text="${day}"></td>
        </tr>
    </tbody>
</tr>

方案2：用<td>包裹内部表格

如果是需要嵌套表格，需将内部表格放入<td>标签中：

<tr th:each="day : ${days}">
    <td>
        <p th:text="${day}"></p>
        <p th:text="${dayStat.index}"></p>
    </td>
    <td>
        <table>
            <tr>
                <td th:text="${day}"></td>
            </tr>
        </table>
    </td>
</tr>

额外注意：<p>标签直接放在<tr>内同样属于非法HTML结构，浏览器会自动修正，建议将<p>放入<td>中，保证整体表格结构合规。

内容的提问来源于stack exchange，提问作者김창훈