【问题标题】:Change tr background color based on conditionals thymeleaf根据条件百里香更改 tr 背景颜色
【发布时间】:2019-01-25 19:13:59
【问题描述】:

我希望根据 th:if 条件更改表格行的背景颜色。

例如:如果预期 != 实际,则 bg = 红色。反之亦然,bg = 绿色。

对于我的示例,我目前有三列——评估类型、预期和实际。评估类型确定预期值和实际值。当前跨度th:style 正确突出显示各个单元格,但我希望根据评估将整个<tr> 突出显示为红色或绿色。

当前代码:

<thead> 
    <th>Eval Type </th>
    <th>Expected </th>
    <th>Actual </th>
</thead>
<tbody>
<tr>
    <td>
                    <span th:if="${example.getEvaluationType()} == '1'" th:text="${example.getExpectedcount()}" 
                    th:style="${example.getActualcount()} == ${example.getExpectedcount()} ? 'background: green' : 'background: red'"></span>

                    <span th:if="${example.getEvaluationType()} == '2'" th:text="${example.getExpectedmb()}"
                    th:style="${example.getActualmb()} == ${example.getExpectedmb()} ? 'background: green' : 'background: red'"></span>

                    <span th:if="${example.getEvaluationType()} == '3'" th:text="${example.getExpectedminutes()}" 
                    th:style="${example.getActualminutes()} == ${example.getExpectedminutes()} ? 'background: green' : 'background: red'" ></span>
    </td>
</tr>
</tbody>

感谢任何有关问题的帮助或线索,因为我没有找到任何问题。 谢谢!

【问题讨论】:

    标签: spring spring-mvc thymeleaf


    【解决方案1】:

    这是预期的行为(即更改单元格的背景,而不是整行),因为您在单个 td 中使用跨度。也许您应该考虑将条件样式移至tr(行标记),如下代码示例:

    <tr th:style="${taskstatistics.getActual()} == ${taskstatistics.getExpected()} ? background-color: green' : 'background-color: red'">
    

    【讨论】:

    • 嘿艾哈迈德 - 谢谢你的评论。我更改了问题以提供更多上下文,但我将通过制作一个很长的 th:if 语句来尝试您的解决方案哈哈。再次非常感谢!
    【解决方案2】:

    对于任何好奇的人:

    我最终完成了上面的计算,并在我的后端 actual == expected ? 'TRUE' : 'FALSE' 中完成了所有这些计算。我将输出分配给单个变量 passed

    将变量和正确的 get/setter 添加到您的程序中,然后此行将使输出将整行着色为红色/绿色。

    &lt;tr th:style="${taskstatistics.getPassed()} == FALSE ? 'background: red' : 'background: green'"&gt;

    【讨论】:

      猜你喜欢
      • 2011-04-23
      • 1970-01-01
      • 2022-10-21
      • 1970-01-01
      • 2014-06-06
      • 2013-10-24
      • 1970-01-01
      • 2016-06-02
      • 2019-06-20
      相关资源
      最近更新 更多