Question

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

例如：如果期望！=实际，则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>

感谢我的帮助或带相关问题的线索，因为我没有找到任何帮助或线索。谢谢！

Answer 1

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

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

Answer 2

对于任何好奇的人：

我最终接受了上面完成的计算，并全部在后端actual == expected ? 'TRUE' : 'FALSE'中进行了计算。我将输出分配给单个变量passed。

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

<tr th:style="${taskstatistics.getPassed()} == FALSE ? 'background: red' : 'background: green'">

根据条件百里香改变tr背景颜色

2 个答案: