时间戳

首页 > 解决方案 > 如何在 Thymeleaf 中使用多个 If else 语句来更改表格行颜色

spring-boot - 如何在 Thymeleaf 中使用多个 If else 语句来更改表格行颜色

问题描述

我正在尝试根据 Thymeleaf 中的值更改行的颜色。我做了一个 if 和 else 语句，效果很好。但是当我添加 else if 语句时，它不起作用。如果balls > 0则#fff，否则如果balls > && mobile > 0则#5af716，否则#eee。 我该如何解决这个问题？

工作版


       <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>

我需要像下面这样，但它给出了一个错误

 <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>

标签： spring-bootthymeleaf

解决方案

看看这个：

<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' ) " >

这会生成一个这样的表（在我的简化测试用例中）：

在此处输入图像描述

需要注意的点是：

1) 更改运行测试的顺序，以便最严格的测试排在第一位。

2) 您可以在三元运算符中嵌套一个三元运算符来模拟多级 if 语句。

我认为这应该适应您的具体情况。

推荐阅读