I want to generate clickable table rows within html + thymeleaf, but I have the following problem. AFAIK it's not able to wrap a tr element with a link (a-tag), because a table can only directly contain tr-subtags. So I have to wrap the content of each td-tag, but these values are dynamically created by thymeleaf!
What would be the best approach to link each row (link each td-tag of each row) to a generated url? Is there some th:text - prefix/suffix functionality?
<tr th:each="item : ${itmes}">
<td th:text="${{item.name}}">some name</td>
<td th:text="${{item.date}}">01.03.2014</td>
<td>author</td>
<td>2</td>
<td>
<a th:href="@{/backend/items/{id}(id=${item.id})}" href="show.html"
role="button" class="btn btn-default btn-circle">
<i class="fa fa-info"></i>
</a>
<a th:href="@{/backend/items/{id}/update(id=${item.id})}" role="button" class="btn btn-warning btn-circle">
<i class="fa fa-edit"></i>
</a>
</td>
</tr>
To make the row clickable, we need to add a . clickable class to <tr> tag. Further add the URL address to attribute onclick="window.
To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content.
Add class . rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a.
To make the full row selectable, you should add the link to the <tr> instead of to individual table cells. Since you're not allowed to place an <a> tag around a table row, you'll have to think a little bit outside the box to solve this puzzle.
I had to solve pretty similar problem with Tymeleaf, and I've also been needed to pass request parameter from item to the url, so I solved like this:
<tr th:each="item : ${itmes}" style="cursor: pointer"
th:onclick="'javascript:rowClicked(\'' + ${item.someField} + '\');'">
...
<td>Some data</td>
...
</tr>
then include somehow the script:
<script>
function rowClicked(value) {
location.href = "/myurl?param=" + value;
}
</script>
For the latest thymeleaf version, answer by @Andrew will not work due to the following issue. The code will have to be modified as follows:
<tr th:each="item : ${itmes}" style="cursor: pointer"
th:some-field="${item.someField}" onclick="rowClicked(this.getAttribute('some-field'))">
...
<td>Some data</td>
...
</tr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With