Question

我的意图是在表的行之一中获取一个对象，因此我可以使用简单的JavaScript函数将其转发到表单。我对jQuery不熟悉，所以我认为我会采用一种尽可能简单的方法。我正在考虑通过将th：data *属性与th：each结合使用来做到这一点，例如：

<tr th:each="employee : ${empDetailsList}" th:data-employee="${employee}">
    <td scope="row" th:text="${employee.id}">ID</td>
    <td scope="row" th:text="${employee.firstName}">firstName goes here</td>
    <td scope="row" th:text="${employee.lastName}">lastName goes here</td>
    <td scope="row" th:text="${employee.email}">email goes here</td>
    <td scope="row" th:text="${employee.username}">user name goes here</td>
    <td th:data-employee="${employee}">
        <button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>

我也尝试过这种方法，将th：data-employee从'tr'标记移到'td'标记，但是结果是相同的：

<tr th:each="employee : ${empDetailsList}">
...
    <td th:data-employee="${employee}">
        <button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>

JS功能：

function showEditForm(employee){
        console.log('Employee object here: ');
        console.log(employee.firstName);
        console.log(employee.lastName);     
    }

正如我提到的，在两种情况下我都得到相同的结果。浏览器控制台的响应是：

Employee object here:
TypeError: employee is null

那么，我在这里做什么错了？

有没有在Thymeleaf中一起使用th：data *和th：each属性的简单方法？

0 个答案: