如何使用 thymeleaf th:each 向表的列添加超鏈接？

Question

我正在嘗試為 thymeleaf 生成的表中的每個元素創建超鏈接。

<tbody>
    <tr th:each="author :${authors}">
        <td th:text="${author.id}"></td>
        <a th:href="@{/authors/{id}(id=${author.id})}">
            <td class="authorLink" th:text="${author.firstName}"></td>
        </a>
        <td th:text="${author.lastName}"></td>
    </tr>
</tbody>

上面的代碼給了我一個表外生成的超鏈接的 output。

這是生成的 html 的鏈接。 https://i.gyazo.com/7dae68eb42cd084b59030e7b17590e5e.png

“linklinklink”是生成的超鏈接的output。 我希望“名字”列成為超鏈接。 如果有人能告訴我如何做到這一點，那就太好了。

Answer 1

將您的<a>標簽放在您希望鏈接出現的<td>單元格中：

<td>
    <a th:href="@{/authors/{id}(id=${author.id})}" 
       th:text="${author.id}"></a>
</td>

請注意如何在<a>標記內使用th:text="..."屬性來控制鏈接的可見文本。

在您的情況下，您在一行中有一個<a>標記，但不是任何單元格的一部分。 這是無效的 HTML，因此您的瀏覽器的 HTML 渲染器將鏈接轉儲到其他地方（在這種情況下，在表格上方）。