[Javascript] [HTML] Invertire colori alternati in tabella

[kiltro]

Ciao, sto inziando ad imparare SCSS.

In una tabella ho il seguente codice che colora le righe alternando bianco e verde:

.test_table tbody {
    tr:nth-child(even) {background: #E7F1D0}
    tr:nth-child(odd) {background: #FFF}
    td {padding-top: 5px; padding-bottom: 5px;}
}

Quello che vorrei fare usando if/else e variabili è

Se in una pagina che contiene la tabella imposto una riga con class="invert" da qui in poi si dovrebbe invertire la colorazione

 

[WmbertSea]

Ciao, devi usare necessariamente "if/else e variabili"?
In caso contrario puoi risolvere molto semplicemente in questo modo:

.test_table tbody {
  tr:nth-child(even), tr.invert:nth-child(odd), tr.invert~tr:nth-child(odd) {background: #E7F1D0}
  tr:nth-child(odd), tr.invert:nth-child(even), tr.invert~tr:nth-child(even) {background: #FFF}
  td {padding-top: 5px; padding-bottom: 5px;}
}

Magari si può anche semplificare ma l'uso di "if/else" non lo vedo proprio applicabile in questo caso

 

[kiltro]

Grazie mille per la risposta, purtroppo mi sono spiegato male nel primo post.
La classe invert dovrebbe invertire lo schema dei colori ogni volta che si presenta.

Esempio (ho eliminato l'esempio dal primo post per non creare confusione):

Riga 1 = bianco
Riga 2 = verde
Riga 3 = bianco
Riga 4 (class="invert") = bianco
Riga 5 = verde
Riga 6 = bianco
Riga 7 = verde
Riga 8 (class="invert")= verde
Riga 9 = bianco
Riga 10 = verde

Si può fare con una sola classe (invert) o devo usarne 2?
Inoltre vorrei che tra riga con classe invert e quella precedente non ci fosse il bordo che le divide (al momento presente attorno a tutte le celle).

 

[WmbertSea]

La classe invert dovrebbe invertire lo schema dei colori ogni volta che si presenta.

Beh, in questo caso diventa tutto più complesso. In puro css andrebbe specificata una regola per ogni possibile serie di tale classe. Anche volendo risolvere in scss devi tener conto di questo limite. A seconda di quante volte è possibile usare (in sequenza) tale classe, il codice prodotto potrebbe risultare eccessivo.

Si può fare con una sola classe (invert) o devo usarne 2?

Se prevedi che tale classe possa essere usata in modo relativamente limitato (non so, un massimo di 5, 6 volte) si potrebbe tentare di risolverla con un'unica classe. Ma anche usando due differenti classi (per identificare le 2 differenti alternanze: chiaro-scuro, scuro-chiaro), ho l'impressione che la questione non si risolva in modo semplice.

Farei però un passo indietro. Prima di tentare di risolvere prendendo questa strada, ti consiglio di valutare la possibilità di usare dei metodi alternativi.

Vorrei capire in che situazione devi poter invertire l'ordine dei colori. Piuttosto che invertire quest'ordine, un'alternativa potrebbe essere quella di inserire semplicemente una riga fittizia (vuota) la dove ti serve avere una "inversione"; a quel punto ti basta nasconderla con display:none in modo che l'ordine dell'alternanza appaia praticamente invertito. Di fatto sul codice ci saranno tali righe vuote; se questo non ti crea problemi, potrebbe essere una soluzione.

Un esempio:

SCSS

.test_table > tbody > tr {
  & {background: #FFF}
  &:nth-child(even) {background: #E7F1D0;}
  & >td {padding: 5px 0;}
  &.foo {display: none;}
}

---
HTML

<table class="test_table">
  <tbody>
    <tr><td>Riga 1 = bianco</td></tr>
    <tr><td>Riga 2 = verde</td></tr>
    <tr><td>Riga 3 = bianco</td></tr>
   
    <tr class="foo"><td></td></tr>
    <tr><td>Riga 4 invert = bianco</td></tr>
    <tr><td>Riga 5 = verde</td></tr>
    <tr><td>Riga 6 = bianco</td></tr>
    <tr><td>Riga 7 = verde</td></tr>
   
    <tr class="foo"><td></td></tr>
    <tr><td>Riga 8 invert = verde</td></tr>
    <tr><td>Riga 9 = bianco</td></tr>
    <tr><td>Riga 10 = verde</td></tr>
  </tbody>
</table>

---
Volendo semplificare il codice, in HTML 5 è possibile (in casi del genere) omettere i tag di chiusura in questo modo (il codice è comunque valido):

<table class="test_table">
  <tbody>
    <tr><td>Riga 1 = bianco
    <tr><td>Riga 2 = verde
    <tr><td>Riga 3 = bianco
   
    <tr class="foo"><td>
    <tr><td>Riga 4 invert = bianco
    <tr><td>Riga 5 = verde
    <tr><td>Riga 6 = bianco
    <tr><td>Riga 7 = verde
   
    <tr class="foo"><td>
    <tr><td>Riga 8 invert = verde
    <tr><td>Riga 9 = bianco
    <tr><td>Riga 10 = verde
  </tbody>
</table>

---
In questo esempio puoi notare che l'alternanza definita col css resta invariata, ho semplicemente aggiunto delle righe fittizie (quelle con classe .foo) per creare l'inversione.

Può essere una soluzione valida per il tuo caso?

Inoltre vorrei che tra riga con classe invert e quella precedente non ci fosse il bordo che le divide (al momento presente attorno a tutte le celle).

Bisogna capire cosa intendi per "bordo", normalmente non dovrebbe essercene. Se ti riferisci allo spazio "trasparente" tra una cella e l'altra, dipende dal border-spacing, ma questo è applicato a livello di tabella, non puoi definirlo sulle singole righe (o celle), in tal caso andrebbe azzerato per la tabella e a quel punto potresti "giocare" con i bordi delle righe.

Un esempio:

.test_table{
  border-collapse: collapse;
  & > tbody > tr {
    & { border-top: 3px solid grey;}
    &:nth-child(even) {background: #E7F1D0;}
    & >td {padding: 5px 0;}
    &.foo {display: none;}
    &.foo+tr{border-top-width:0px;}
  }
}

---
Se invece ti riferisci ad un vero e proprio bordo presente già nella tua tabella, bisogna capire come questo è applicato e valutare come intervenire per "azzerarlo" per quelle specifiche righe dove non ti serve. Nel caso, chiarisci meglio quale sia la tua situazione.