Zeigen Sie unterschiedliche Hintergründe für abwechselnde Zeilen der expandierbaren Tabelle an ⇐ CSS

[Guest]

Ich verwende die Zeilenerweiterungsfunktion von primeNg.
Der Code ist hier: https://primefaces.org/primeng/showcase ... wexpansion
Ich habe eine Anforderung, gelben Hintergrund für ungerade Zeilen und grauen Hintergrund für gerade Zeilen anzuzeigen, aber die zusätzlich eingefügte Zeile mit der untergeordneten Tabelle sollte bei der Berechnung nicht berücksichtigt werden.
Betrachten Sie das folgende HTML-Beispiel, bei dem Benutzer hat die erste Reihe erweitert. Ich möchte nicht, dass die Zeilen mit der Klasse „table-row-expand“ in der gerade/ungerade-Regel berücksichtigt werden. Hier möchte ich, dass die erste Reihe gelb ist, die zweite Reihe grau ist und die dritte Reihe wieder gelb ist. Die erweiterte Zeile sollte keinen Hintergrund haben.
Beachten Sie, dass die Zeile „.table-row-expand“ nur dann zum DOM hinzugefügt wird, wenn der Benutzer die entsprechende Zeile erweitert. Bitte helfen Sie mir bei diesem Problem.

Code: Select all

.table-row:nth-child(odd) {
background-color: yellow;
}

.table-row:nth-child(even) {
background-color: grey;
}

Code: Select all

 


 // first row (should be gray)


 // expanded row (should not be colored)

 // child table 




 // second row (should be yellow)


 // third row (should be gray)