th：样式在我的项目中不起作用，具体取决于情况 true：false

Question

我的文本必须使用 Thymeleaf 根据 true:false 情况改变颜色，但无论我做什么，它都不起作用。

    <table th:each="book : ${assignedBooks}">
        <tr th:style="${book.getExpired()? 'color: red;' : 'color: blue;'}" th:text="${book.getName() + ', ' + book.getAuthor() + ', ' + book.getYear()}">'someBook'</tr>
    </table>

我已经检查了 .getExpired == true，但我不明白为什么它仍然不起作用。

Answer 1

您的

<table>

HTML 包含一个或多个

<tr>

行 - 但这些行不包含任何

<td>

单元格。将文本（来自

th:text="..."

）放在

<td>

内。

<table th:each="book : ${assignedBooks}">
    <tr th:style="${book.getExpired()? 'color: red;' : 'color: blue;'}">
        <td th:text="${book.getName() + ', ' + book.getAuthor() + ', ' + book.getYear()}">'someBook'></td>
    </tr>
</table>

---

您可以通过查看 Thymeleaf 生成并显示在浏览器中的 HTML 自行解决此类问题。请记住：Thymeleaf 在服务器上生成 HTML，然后将该 HTML 发送到浏览器。因此，您可以准确地看到 Thymeleaf 生成的内容（除非它在服务器上引发错误/异常）。

通常您的浏览器中有一个“查看源代码”菜单项（取决于您使用的浏览器）。

在您的情况下，使用问题中的方法，您可能会看到类似以下内容：

The Adventures of Tom Sawyer, Mark Twain, 1876
<table>
    <tbody>
        <tr style="color: red;"></tr>
    </tbody>
</table>

了解缺少任何

<td>

单元格如何导致文本呈现在表格之外。每个浏览器如何尝试渲染不完整/无效的 HTML 取决于每个浏览器 - 因此您可能会看到类似但不同的内容。

---

有关如何创建有效/完整 HTML 表格的更多详细信息，请参阅

table

。