Condições múltiplas de folha do timo, mudar a cor de fundo

Question

As células da tabela nas colunas accountDTO.state e accountDTO.accountDTO devem mudar a cor do plano de fundo, dependendo do valor do texto de accountDTO.state. Eu tentei isso:

Thymeleaf - Como aplicar dois (ou mais) estilos com base em condições mutuamente exclusivas

e eu pesquisei mais algumas soluções, mas todos usam condicionais para dois valores possíveis, ou na URL acima há várias condições. Tenho apenas uma condição, mas tenho 9 valores possíveis nesse campo. O usuário seleciona um valor para esse campo em uma página da web diferente. Nesta página, uma lista do banco de dados é mostrada.

Agora tentei com a instrução th: switch dentro da tag td, mas preciso adicionar span ou div dentro de td, mas neste caso não funciona, as células não são coloridas. Procurei algo como estrutura if / else / if ou elif, mas parece que não há nenhum. E não posso repetir isso em uma única tag. Espero poder usar o th: switch, mas por que não funciona?

Abaixo está apenas uma opção de versão mais curta, apenas alguns dos casos para este exemplo, mas vou precisar de nove casos no total.

            <tbody>
                <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
                    <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
                    <td th:text = "${accountDTO.state}" th:switch = "${accountDTO.state}"
                    ><span th:case = "${accountDTO.state} == 'OUT_OF_USE'" th:appendstyle = "'background: red'"></span> <span th:case = "${accountDTO.state} == 'DEVICE'" th:appendstyle = "'background: green'"></span>
                    <span th:case = "${accountDTO.state} == 'LOCKED'" th:appendstyle = "'background: blue'"></span> </td> <td th:text = "${accountDTO.employee.employeeName}"></td>
                    <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
                </tr>
            </tbody>

Answer 1

Considere usar a variável como classe para simplificar o Thymeleaf e o HTML. Em seguida, você pode definir o formato de forma consistente com seu CSS. Seu HTML seria mais ou menos assim:

<tbody>
    <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
        <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
        <td th:text = "${accountDTO.state}" th:classappend = "${accountDTO.state}"></td>
        <td th:text = "${accountDTO.employee.employeeName}"></td> <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
    <tr>
</tbody>

Em seguida, observe algo assim em seu CSS:

td.OUT_OF_USE {
    background: red;
}
td.DEVICE {
    background: green;
}
td.LOCKED {
    background: blue;
}

Possivelmente útil para tornar a saída semelhante consistente em páginas separadas.