CODEWITHSUNDEEP
spring-bootthymeleaf
Abdusoli
Abdusoli

Reputation: 659

How to Use Multiple If else statements inside Thymeleaf to change table row color

I am trying to change color of rows based of values in Thymeleaf. I did one if and else statements, it worked well. But when I added else if statement it is not working. If balls > 0 then #fff, else if balls > && mobile > 0 then #5af716, else #eee. How can i resolve this issue?

working version


       <tr th:each="country : ${data}" th:style="${country.balls} > 0 ? 'background-color: #fff' :'background-color: #eee' " >
              <td th:text="${country.id}"></td>
              <td th:text="${country.msisdn}"></td>
              <td th:text="${country.frequency}"></td>
              <td th:text="${country.balls}"></td>
              <td th:text="${country.mobile}"></td>
              <td th:text="${country.name}"></td>
              <td>
                <!--<a class="btn btn-danger delBtn" th:href="@{delete/(id=${country.id})}">Delete</a>-->
                <a class="btn btn-primary eBtn" th:href="@{findOne/(id=${country.id})}">Edit</a>
              </td>
        </tr>

I need like below, but it is giving an error

 <tr th:each="country : ${data}" th:style="${country.balls > 0}  ? 'background-color: #fff' :
                                                      ${country.balls > 0 and country.mobile > 0} ? 'background-color: #5af716'
                                                      : 'background-color: #eee' " >
              <td th:text="${country.id}"></td>
              <td th:text="${country.msisdn}"></td>
              <td th:text="${country.frequency}"></td>
              <td th:text="${country.balls}"></td>
              <td th:text="${country.mobile}"></td>
              <td th:text="${country.name}"></td>
              <td>
                <!--<a class="btn btn-danger delBtn" th:href="@{delete/(id=${country.id})}">Delete</a>-->
                <a class="btn btn-primary eBtn" th:href="@{findOne/(id=${country.id})}">Edit</a>
              </td>
       </tr>

Upvotes: 1

Views: 532

Answers (1)

andrewJames
andrewJames

Reputation: 21910

Take a look at this:

<tr th:each="country : ${countries}" 
    th:style="${country.balls > 0 and country.mobile > 0} 
        ? 'background-color: #5af716' 
        : (${country.balls > 0 } ? 'background-color: #fff' 
        : 'background-color: #eee' ) " >

This generates a table like this (in my simplified test case):

enter image description here

Points to note are:

1) Change the order in which you run your tests, so that the most restrictive test is first.

2) You can nest a ternary operator inside a ternary operator to mimic a multi-level if statement.

I think this should be adaptable to your specific scenario.

Upvotes: 3

Related Questions