在 Thymeleaf th:each 中使用 JavaScript 变量

Question

I am trying to build a table using th:each and have the whole row of the table clickable as a link through JavaScript.

<table>
    <th:block th:each='user : ${list}'>
        <script th:inline="javascript">
            var userid = [[${user.id}]];
        </script>
        <tr onclick="location.href='user?id='+userid">
            <td th:text="${user.firstName}"></td>
            <td th:text="${user.lastName}"></td>    
        </tr>
    </th:block>
</table>

However, the variable always refers to the latest value and not the one it was when the row was created. Is there a way to do that? Or maybe a different solution to what I'm trying to do?

Answer 1

You need to change your design,

The reason is: we can not use client variable in server side,but we can use server variable in client side

Because when we compile thymeleaf code in server side we do not know which client will access it,so it can not assign value to the specific client

Answer 2

You can avoid using JavaScript by adding an <a> element to each table cell (Inspired by https://stackoverflow.com/a/17147909/40064 ):

<table>
    <th:block th:each='user : ${list}'>
        <tr>
            <td><a th:href="@{/user(id=${userid})}" th:text="${user.firstName}"></a></td>
            <td><a th:href="@{/user(id=${userid})}" th:text="${user.lastName}"></a></td>    
        </tr>
    </th:block>
</table>

Answer 3

No need for the th:block , you can simply put the th:each on the tr .

To accomplish the click, I recommend putting the id in a data attribute, and retrieving it in JavaScript. This should work for you:

<table>
    <tr th:each="user : ${list}"
        th:data-id="${user.id}"
        onclick="location.href = 'user?id='+this.getAttribute('data-id')">
        <td th:text="${user.firstName}"></td>
        <td th:text="${user.lastName}"></td>    
    </tr>
</table>