Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Thymeleaf: clickable row

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>
like image 463
NaN Avatar asked Dec 15 '14 13:12

NaN


People also ask

How do I make a row clickable?

To make the row clickable, we need to add a . clickable class to <tr> tag. Further add the URL address to attribute onclick="window.

How do you make a whole row in table clickable as a link?

To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content.

How do I make an entire row a link in HTML?

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.

How do I make a table row selectable in HTML?

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.


2 Answers

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>
like image 179
Andrew Avatar answered Oct 18 '22 05:10

Andrew


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>
like image 3
Saurabh Gour Avatar answered Oct 18 '22 05:10

Saurabh Gour