Timelea in più condizioni, cambia il colore di sfondo

Question

Le celle della tabella nelle colonne accountDTO.state e accountDTO.accountDTO dovrebbero cambiare il colore di sfondo, a seconda del valore del testo di accountDTO.state. Ho provato questo:

Thymeleaf - Come applicare due (o più) stili in base a condizioni che si escludono a vicenda

e ho cercato altre soluzioni, ma tutti usano condizionali per due possibili valori, o nell'URL sopra ci sono più condizioni. Ho solo una condizione, ma ho 9 possibili valori su quel campo. L'utente seleziona un valore per quel campo in una pagina web diversa. In questa pagina viene mostrato un elenco dal database.

Ora ho provato con l'istruzione th: switch all'interno del tag td ma poi devo aggiungere span o div all'interno di td, ma in questo caso non funziona, le celle non sono colorate. Ho cercato qualcosa come struttura if / else / if o elif, ma a quanto pare non ce n'è. E non posso ripetere th: if in un singolo tag. Spero di poter usare th: switch ma, perché non funziona?

Di seguito è riportato solo un cambio di versione più breve, solo alcuni dei casi per questo esempio, ma avrò bisogno di nove casi in totale.

            <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

Prendi in considerazione l'utilizzo della variabile come classe per semplificare Thymeleaf e HTML. Quindi puoi impostare il formato in modo coerente con il tuo CSS. Il tuo codice HTML sarebbe simile a questo:

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

Quindi guarda qualcosa di simile nel tuo CSS:

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

Forse utile per rendere un output simile coerente su pagine separate.