Wenn Sie mehrere Bedingungen haben, ändern Sie die Hintergrundfarbe

Question

Tabellenzellen in den Spalten accountDTO.state und accountDTO.accountDTO sollten die Hintergrundfarbe abhängig vom Textwert von accountDTO.state ändern. Ich habe das versucht:

Thymeleaf - So wenden Sie zwei (oder mehr) Stile an, die sich gegenseitig ausschließen

und ich habe nach weiteren Lösungen gesucht, aber jeder verwendet Bedingungen für zwei mögliche Werte, oder in der obigen URL gibt es mehrere Bedingungen. Ich habe nur eine Bedingung, aber ich habe 9 mögliche Werte in diesem Feld. Der Benutzer wählt einen Wert für dieses Feld auf einer anderen Webseite aus. Auf dieser Seite wird eine Liste aus der Datenbank angezeigt.

Jetzt habe ich es mit der Anweisung th: switch innerhalb des td-Tags versucht, aber dann muss ich span oder div innerhalb des td hinzufügen, aber in diesem Fall funktioniert es nicht, die Zellen sind nicht farbig. Ich habe nach so etwas wie if / else / if Struktur oder elif gesucht, aber es scheint keine zu geben. Und ich kann das nicht wiederholen: wenn in einem einzigen Tag. Ich hoffe ich kann th: switch benutzen aber warum funktioniert es nicht?

Im Folgenden finden Sie nur einen kürzeren Versionswechsel, nur einige der Fälle für dieses Beispiel, aber ich benötige insgesamt neun Fälle.

            <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

Verwenden Sie die Variable als Klasse, um Thymeleaf und HTML zu vereinfachen. Dann können Sie das Format konsistent mit Ihrem CSS einstellen. Ihr HTML würde ungefähr so ​​aussehen:

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

Dann schauen Sie sich so etwas in Ihrem CSS an:

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

Möglicherweise nützlich, um ähnliche Ausgaben auf separaten Seiten konsistent zu machen.