CODEWITHSUNDEEP
htmlcssthymeleaf
LosmiNCL
LosmiNCL

Reputation: 309

Thymeleaf multiple conditions, change background color

Table cells in columns accountDTO.state and accountDTO.accountDTO should change background color, depending on the text value of accountDTO.state. I've tried this:

Thymeleaf - How to apply two (or more) styles based on mutually exclusive conditions

and I've searched some more solutions, but everyone uses conditionals for two possible values, or in URL above there is multiple conditions. I have only one condition, but I have 9 possible values on that field. User selects a value for that field in a different web page. On this page, a list from database is shown.

Now I've tried with th:switch statement inside td tag but then I need to add span or div inside td, but in this case it doesn't work, cells are not colored. I've searched for something like if/else/if structure or elif, but there is none it seems. And I can't repeat th:if in a single tag. I hope I can use th:switch but, why it doesn't work?

Below is just a shorter version switch, just some of the cases for this example, but I'll need nine cases in total.

            <tbody>
                <tr th:each = "accountDTO : ${listOfAccounts}">
                    <td th:text = "${accountDTO.accountDTO}"></td>
                    <td th:text = "${accountDTO.startBalance}"></td>
                    <td th:text = "${accountDTO.currentBalance}"></td>
                    <td th:text = "${accountDTO.state}" th:switch = "${accountDTO.state}"
                    ><span th:case = "${accountDTO.state} == 'OUT_OF_USE'" th:appendstyle = "'background: red'"></span>
                    <span th:case = "${accountDTO.state} == 'DEVICE'" th:appendstyle = "'background: green'"></span>
                    <span th:case = "${accountDTO.state} == 'LOCKED'" th:appendstyle = "'background: blue'"></span>
                    </td>
                    <td th:text = "${accountDTO.employee.employeeName}"></td>
                    <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
                </tr>
            </tbody>

Upvotes: 2

Views: 1288

Answers (1)

Richard
Richard

Reputation: 135

Consider using the variable as class to simplify the Thymeleaf and HTML. Then you can set the format consistently with your CSS. Your HTML would look something like this:

<tbody>
    <tr th:each = "accountDTO : ${listOfAccounts}">
        <td th:text = "${accountDTO.accountDTO}"></td>
        <td th:text = "${accountDTO.startBalance}"></td>
        <td th:text = "${accountDTO.currentBalance}"></td>
        <td th:text = "${accountDTO.state}" th:classappend = "${accountDTO.state}"></td>
        <td th:text = "${accountDTO.employee.employeeName}"></td>
        <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
    <tr>
</tbody>

Then look at something like this in your CSS:

td.OUT_OF_USE {
    background: red;
}
td.DEVICE {
    background: green;
}
td.LOCKED {
    background: blue;
}

Possibly useful for making similar output consistent on seperate pages.

Upvotes: 1

Related Questions