[Javascript] [HTML] Invertire colori alternati in tabella

Discussione in 'Javascript' iniziata da kiltro, 1 Dicembre 2018.

  1. kiltro

    kiltro Nuovo Utente

    Registrato:
    1 Dicembre 2018
    Messaggi:
    2
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    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: 2 Dicembre 2018
  2. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    134
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    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
     
  3. kiltro

    kiltro Nuovo Utente

    Registrato:
    1 Dicembre 2018
    Messaggi:
    2
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    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).
     
  4. WmbertSea

    WmbertSea Utente Attivo

    Registrato:
    28 Novembre 2014
    Messaggi:
    134
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    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.

    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?

    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.
     
Sto caricando...

Condividi questa Pagina