So verwenden Sie jquery, um die Farbe ungerader und gerader Tabellenzeilen und aktiver Zeilen zu steuern

So verwenden Sie jquery, um die Farbe ungerader und gerader Tabellenzeilen und aktiver Zeilen zu steuern_jquery

WBOY

Freigeben： 2016-05-16 16:51:58

Original

1249 Leute haben es durchsucht

Obwohl JQuery seit vielen Jahren beliebt ist, fiel es mir immer schwer und ich habe mir nicht die Zeit genommen, es zu lernen. Ich schaue es mir nur gelegentlich aus einer Laune heraus an und vergesse es dann nach vielen Tagen. Kürzlich habe ich eine Tabelle mit ungeraden und geraden Zeilen unterschiedlicher Farbe verwendet und musste mir jquery noch einmal ansehen. Obwohl es sich immer noch schwierig anfühlt, ist es nicht mehr so schwierig wie zuvor. Nachdem ich es fertiggestellt habe, muss ich seufzen, dass JQuery wirklich großartig ist. Ich muss nicht viele Javascript-Funktionen schreiben, um es mit nur wenigen Sätzen zu implementieren.

Definieren Sie zunächst den ungeraden und geraden Zeilenstil der Tabelle wie folgt:

Kopieren Sie den Code Den Code ist wie folgt:

 
body { 
font-size:12px 
} 

th { 
color: #FFFFFF; A172AC; 
} 

table,table td,table th { 
padding: 0.5em; 
border-spacing:0 ; 
} 
/* odd items 1,3,5,7,... */ 
table tbody tr.odd, 
.odd { 
background: #FBD106; >} 

/* even items 2,4,6,8,... */ 
table tbody tr.even, 
.even { 
background: #E6453B 
} 

/* schwebende Elemente */ 
.odd:hover, 
.even:hover, 
.hover { 
Hintergrund: #4BB747; 
Farbe: # FFFFFF; 
} 

 
Dann gibt es den Seitencode: 

Kopieren Sie den Code

Der Der Code lautet wie folgt: head>

Verwenden von jquery, um unterschiedliche Farben für ungerade und gerade zu implementieren Zeilen in der Tabelle

>data
data ;/tr>

data data
>data 🎜>data data
data 🎜>

Wenn nicht erforderlich Da ungerade und gerade Zeilen unterschiedliche Farben haben, können Sie CSS direkt verwenden.

Code kopieren

Der Code lautet wie folgt:

table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}

table tr:nth-child(odd) td,
Tabelle tr: nth-child(odd) th {
background-color: #E6453B}