Qual è il modo migliore per dare uno stile alle righe alternate in una tabella?

Question

Ovviamente, lo stile reale delle righe pari / dispari verrà effettuato tramite una classe CSS, ma qual è il modo migliore per " allegare " la classe alle file? È meglio inserirlo nel markup o è meglio farlo tramite javascript sul lato client? Quale è meglio e perché?

Per semplicità, supponiamo che si tratti di una tabella di grandi dimensioni, 100 righe e che la combinazione di colori alterni righe pari / dispari. Inoltre, una sorta di libreria javascript che può facilmente farlo è necessaria altrove nella pagina e quindi il sovraccarico di quel pacchetto non è un fattore.

---

Il vero obiettivo di questa domanda è determinare quali compromessi sono coinvolti e come devono essere gestiti tali compromessi, come gli hit delle prestazioni sul server se la pagina viene colpita sotto carico (supponiamo una tabella dinamica) , hit di larghezza di banda per utenti con velocità di connessione inferiori, hit semantici aggiungendo codice di layout aggiuntivo all'HTML (L'idea qui è che l'HTML è per il contenuto, il CSS è per il layout e javascript è per il comportamento del contenuto, oltre a controllare / aumentare il layout)

Answer 1

Puoi farlo abbastanza facilmente con jQuery, in questo modo:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

Puoi qualificare un po 'di più il selettore se vuoi semplicemente farlo su una particolare tabella o farlo anche su elementi' li '.

Penso che questo sia un po 'più pulito e più leggibile sul lato client di quanto sarebbe in alcuni ambienti sul lato server,

Answer 2

Lo metterei nel markup (lato server). Il server impiega meno di un millisecondo per completare rowNum = (rowNum - 1) * -1 È un mio peeve quando un sito web è lento a causa della quantità di javascript in esecuzione.

Answer 3

Come detto nelle altre risposte, farlo su una grande tabella sul lato client sarà più lento che sul lato server e potrebbe non funzionare se l'utente ha disabilitato JavaScript.

Tuttavia, l'utilizzo di un framework JS come jQuery rende così facile che è davvero allettante:

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 4

Per una tabella di dimensioni così grandi farei l'elaborazione delle righe sul lato server, usando PHP o simili per calcolare i nomi di classe pari / dispari per ogni riga. Questa soluzione funzionerà per quelli con JavaScript disattivato e avrà prestazioni molto più elevate rispetto a qualsiasi libreria JavaScript che elabora un elemento tabella di queste dimensioni.

In PHP la logica sarebbe simile a

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

Se non è possibile eseguire alcuna elaborazione sul lato server, consiglierei di impostare JavaScript per i tag di classe per ogni riga anziché manipolare direttamente gli stili. In questo modo la presentazione viene lasciata al CSS e il comportamento viene lasciato al JavaScript e se si modifica il modo in cui le classi vengono generate in un secondo momento, il codice di presentazione rimarrà lo stesso.

Answer 5

Lo farei inizialmente sul lato server poiché il client potrebbe non avere javascript abilitato. Se stai aggiungendo / rimuovendo le righe sul lato client con javascript, potresti voler avere anche la possibilità di farlo sul client dopo che l'evento di aggiunta / rimozione è stato completato. Per quanto possibile, dovresti provare a far funzionare bene la tua interfaccia senza Javascript a meno che tu non possa controllare l'ambiente del browser (ad esempio, in un'app Intranet in cui puoi richiederne l'attivazione).

Answer 6

Un giorno, saremo in grado di usare CSS puro . Naturalmente, questa parte delle specifiche CSS è stata introdotta nel 2001 e non è ancora supportata. = (

Answer 7

Ciò che stai cercando di realizzare può anche essere fatto con CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

Questo è anche elencato in le specifiche dei selettori c3 di w3 . Se stai cercando compatibilità, aggiungere la classe lato server o tramite javascript sarebbe una soluzione molto migliore.

Answer 8

Dipende dal tuo scenario. Basato su JavaScript potrebbe essere più rapido da implementare per un numero di righe se la tabella non viene creata al volo. Se stai creando dinamicamente la tua tabella, tuttavia, potresti facilmente impostare la classe per ogni altra riga su "quot_alternate". - Preferisco il metodo lato server se temi che alcuni dei tuoi utenti potrebbero non avere JavaScript.

Answer 9

Se stai usando qualsiasi tipo di framework, questa è di solito una delle prime funzionalità che includono.

Altrimenti ho cercato su Google "tabella jscript alternando i colori" e ho ottenuto diverse decine di link a tecniche.

(A parte: è un peccato che gli sviluppatori non ottengano mai credito per il codice che non hanno scritto.)

Answer 10

Applico sempre la classe sul lato server quando vengono trasmessi in streaming / aggiunti alla pagina, ma se si dispone di un riordinamento sul lato client, sarà necessario riclassificare le righe.

Answer 11

Ho trovato un buon sito che spiega cosa vuoi ottenere usando jquery:

Ecco l'output finale- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

Ed ecco il tutorial- http://15daysofjquery.com/examples/zebra/

Answer 12

Direi davvero che dipende dalla situazione. Se esegui il ciclo continuo dei dati per creare le righe sul lato server, probabilmente direi che dovresti farlo lì.

Questo diventa molto più complicato se stai per iniziare a utilizzare lo script lato client per ordinare / riordinare le righe. In questo caso, se sono circa 100 righe, potrei essere propenso a farlo sul lato client dell'evento onload, perché almeno in questo modo non stai duplicando il codice per determinare il colore della riga. Lo ammetto, in questo caso dipende davvero dalla sua velocità. Probabilmente lo proverei e vedrei se la performance è accettabile prima di prendere una decisione finale.