[Javascript] [HTML] Invertire colori alternati in tabella

kiltro

Nuovo Utente
1 Dic 2018
5
1
3
Ciao, sto inziando ad imparare SCSS.

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

Codice:
.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
 
Ultima modifica:

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Ciao, devi usare necessariamente "if/else e variabili"?
In caso contrario puoi risolvere molto semplicemente in questo modo:
Codice:
.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

Nuovo Utente
1 Dic 2018
5
1
3
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
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
Codice:
.test_table > tbody > tr {
  & {background: #FFF}
  &:nth-child(even) {background: #E7F1D0;}
  & >td {padding: 5px 0;}
  &.foo {display: none;}
}
---
HTML
Codice:
<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):
Codice:
<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:
Codice:
.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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Creare elementi html con javascript Javascript 3
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
M [Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone Javascript 1
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 13
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13
A eseguire codice html da funzione javascript Javascript 2
P text/ javascript in html Javascript 3

Discussioni simili