Изменить цвет фона tr на основе условий

Question

Я хочу изменить цвет фона строки таблицы на основе th: если условие.

Например: если ожидается! = Фактический, bg = красный. наоборот, bg = зеленый.

В моем примере у меня сейчас три столбца - тип eval, ожидаемый и фактический. Тип оценки определяет значения для ожидаемого и фактического. Текущий диапазон 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

Для любого любопытного:

Я закончил тем, что взял вычисления, сделанные выше, и сделал их все в моем бэкэнде actual == expected ? 'TRUE' : 'FALSE'.Я назначил вывод одной переменной passed.

Добавьте переменную и правильные значения get / setters в вашу программу, и затем эта строка позволит выводу окрасить всю строку в красный / зеленый цвет.

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

Answer 2

Это ожидаемое поведение (т. Е. Изменение фона ячейки, а не всей строки), поскольку вы используете диапазон в одном td.Возможно, вам следует рассмотреть возможность перемещения вашего условного стиля в tr (тег строки) как следующий пример кода:

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