Un modo migliore per determinare persino/righe dispari nella tabella

Question

Diciamo che avere una pagina web con seguente codice di esempio:

<tr class="even"> 
    <td>something1</td> 
    <td colspan="1">somthing1.1</td> 
</tr> 


<tr class="odd"> 
    <td>something2</td> 
    <td><b>something2.1</b></td> 
</tr> 

<tr class="even"> 
    <td>something3</td> 
    <td><b>something3.1</b></td> 
</tr> 

Queste non sono in un ciclo così che ho da dire in modo esplicito 'anche' 'strano'. In seguito, se decidiamo di aggiungere una nuova riga tra qualcosa2 e qualcosa3, dobbiamo anche cambiare 'anche' 'dispari' per il resto delle righe.

C'è modo in css di farlo automaticamente in IE6?

Attualmente questo è il mio codice CSS per ancora

.headerTable tr.even { 
    font-weight : bold; 
    font-size : 9pt; 
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva; 
    background-color: #FFFFFF; 
    height: 20px; 
    color: #000000; 
} 

avevo già jQuery

Answer 1

Dai una prova a jQuery. Poi si può semplicemente fare questo:

$("#myTable tbody tr:visible:even",this).addClass("even"); 
    $("#myTable tbody tr:visible:odd",this).addClass("odd"); 

Il ": visibile" selettore non è realmente necessario, ma quando si filtra una tabella facendo alcune righe nascoste, il metodo continuerà a funzionare correttamente.

Answer 2

pari/dispari bambino di utilizzare jQuery implementation

Answer 3

Sì. Puoi usare JavaScript per scorrere questi elementi e resettare le loro classi in base a pari/dispari.

Answer 4

L'approccio migliore sarebbe lo :nth-child() pseudo-class.

Ma sfortunatamente non è ancora ampiamente supportato. Quindi probabilmente dovrai usare JavaScript per farlo.

Answer 5

Il modo per farlo sarebbe utilizzare le regole nth-child (pari) e (dispari). Sfortunatamente, e questo non dovrebbe sorprendere, IE6 non supporta questo. Così avete alcune opzioni:

A) utilizzare JavaScript, con l'ovvio inconveniente di non lavorare per le persone con JS disabilitato:

var rows = document.getElementById('mytable').getElementsByTagName('tr'); 
for(var x = 0; x < rows.length; x++) { 
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd'; 
} 

Se si prevede di avere bisogno di un comportamento lato client più dinamico sulla vostra applicazione , puoi quindi controllare una libreria come jQuery. Per solo questo non è necessario, ma rende il lavoro con Javascript attraverso i browser un gioco da ragazzi. Faresti quanto sopra con jQuery come mostrato in questa risposta.

A seconda del pubblico, Javascript può essere perfettamente accettabile. Se non lo è, allora forse puoi ...

B) Semplifica il tuo CSS e continua a farlo manualmente. È possibile contrassegnare solo le righe dispari con una classe e quindi rendere lo stile di default della riga lo stile uniforme. Questo ti farà risparmiare un po 'di lavoro quando muovi le cose.

C) Generare le righe a livello di codice. È davvero arcaico inserire dati come quelli in una tabella fissa se si sta aggiornando abbastanza spesso che questo è un problema. Ovviamente sono ignaro delle circostanze, ma dovrebbe essere banale farlo in qualche modo in un modo semplice con un linguaggio semplice come PHP.

D) Interrompere l'utilizzo di un browser obsoleto. :) (Questo è solo per metà scherzando, dato che sono sicuro che è fuori dal tuo controllo)