csíkos tábla
Nagyon gyakran a másfél mérföld az asztal, meg kell csinálni a „csíkos tábla” - ez az, amikor a színe váltakozó sorokban egymást. Ez a megközelítés segít a közölt táblázatos tartalom olvashatóbb és vizuális formában.
Mivel a táblázat kapunk, „csíkos”, akkor ez a technika néha egy asztal zebra stílusban.
Ebben a cikkben fogunk beszélni, hogy ezek a táblázatok végrehajtását.
Először is hozzunk létre egy szabványos HTML-frame jövőnk „csíkos” táblázatban.
Felhívom a figyelmet, hogy a kupak tábla van szükség, hogy lezárja a címke thead. és a fő tartalma az asztalra - a tbody. Ez minden, amit meg kell Táblázatsorok „csíkos”, hogy könnyebb a jövőben.
És nézzük is egy táblázatot előírják alap CSS stílusokat.
Így fogunk létrehozni egy szabályos táblázat nélkül „csíkos” sorozat. Egy példa lehet megtekinteni, kattintson a „Demo” gombra.
Nos, most menjünk tovább, hogy a fő feladata az e cikk és nézd meg, hogyan lehet, hogy a táblázatokban a „csíkos”?
1. módszer - Csíkos táblázatot jQuery
Hosszú ideig ez volt a módja annak, hogy a fő megoldást, hogy a kérdés, hogy létrehozza a „csíkos” táblákat.
Ő a következő megközelítés.
Készítünk két CSS szabályokat, amelyek feladata lesz a feladat háttér páros és páratlan sorok.
Esetünkben ezt tettük páratlan sorok lesz egy fehér színű, sőt - világoskék.
És most már elegendő ahhoz, hogy adjunk egy kis script írt jQuery, ami a páratlan sorok a táblázat, hogy adjunk egy osztály odd_row. és még - even_row és így a táblázat lenne „csíkos”.
Ez tulajdonképpen a forgatókönyvet.
JQuery szelektor $ ( "table tr: páratlan"). kiválasztjuk a páratlan sorok a táblázat, és a $ ( „table tr: még a”) - minden páros.
Szintén figyelni, hogy ne tervezzen ( „thead tr”). melynek segítségével már kizárták a mintából sapka asztalra, mert nem kell, hogy stilizálhatja a „csíkos” táblázatot, mert vagyunk regisztrált egyéni stílusokat.
És azt is, nézd meg, mit szoktunk thead tr (thead tag) a választó. Ha már létrehozott egy HTML-frame, én felhívta a figyelmet arra a tényre, hogy a kupak tábla jobb csomagolja thead. Szóval, amit tettünk, hogy nekünk ebben a szakaszban, könnyebb volt, hogy megszüntesse a sapkát a minta.
Végül segítségével addClass ( „even_row”) és a addClass ( „odd_row”) adjuk hozzá a megfelelő osztályt a páros és páratlan sorok a táblázat.
Az eredmény megtekinthető a „Demo”.
2. módszer - csíkos tábla a CSS
A módszer, a fent leírt, természetesen a legtöbb cross-browser, és működni fog a régebbi böngészők, de ez is egy nagy hátránya -, hogy van, hogy egy harmadik fél jQuery script.
Ez nem mindig jó megközelítés, úgyhogy nézzük meg a második utat, ami a „csíkos” táblázatban tisztán CSS.
Ehhez a stíluslap elegendő hozzá csak két szabályt.
És most mi tábla is lesz „csíkos”.
Az egész titka ennek a módszernek az, hogy egy pszeudo: n-ed gyermek. Vele, akkor válassza ki a CSS jelent páros és páratlan sorok, és nekik azonnal háttérszínt használata nélkül szkripteket.
n-ed gyermek (páratlan) - kijelöli az összes páratlan sorok, és kérni fogja a fehér háttér, és: n-ed gyermek (még) - választja ki a páros sorok és kérje őket a világoskék háttér.
Ugyanakkor, azt is megjegyezni, hogy a CSS-választó táblázat tbody tr használjuk tbody. ez történik, mert az a tény, hogy nem kell tenni, „csíkos” cap asztal, amit csinálunk, „csíkos”, csak azokat a sorokat, amelyek a tag tbody.
Mivel ezt a módszert, cross-browser, akkor fog működni minden modern böngésző és IE9 +.
Ezért, ha nem kell a támogatást IE8, ne habozzon használni, de ha továbbra is fenn kell tartani, akkor az első út, hogy segítsen.
kis ajánlás
Végül, szeretnék adni egy pár tippet.
Először a jelen cikkben ismertetett egy olyan megközelítés segítségével nem feltétlenül csak egy „csíkos” táblákat, akkor is, hogy a „csíkos” felsorolás.
Például ha az első módszer, csak akkor kell változtatni a jQuery script.
Egyébként minden változatlan marad.
És ha csak a második megközelítés szükséges rögzíteni a CSS választók a szabályokat.
Másodszor, figyeljen a „Demo” mi „csíkos” listát. Semmi nem vette észre?
Az eljárást alkalmazva jQuery. mi az első elem a lista van kiemelve világoskék színű, és további színes alternatív, és azáltal, hogy a módszert a tiszta CSS - az első elem, fehér alapon.
Miért van az eredeti elem a lista különböző módon más a színe?
Hogy nem léphet be a kábultság, azt fogja magyarázni.
Amikor a jQuery kezdjük számozás elemeket a semmiből, és így tovább az utolsó.
Azaz, $ ( „ul li: páratlan”) választja a páratlan elemeket. Például: 1, 3, 5, 7, stb De $ ( „ul li: még a”) kijelöli az összes még elemet nullától kezdve. Például: 0, 2, 4, 6, stb
Használata: n-ed gyermek eleme sem nulla nincs ott, az egész számozás megy az első.
Ennélfogva, van ilyen eltérés, ha a jQuery módszerrel első elem lényegében egy nulla elemet, és tartják is, így kap egy világoskék háttér.
A példánkban a „csíkos” táblák nincs különbség, mert mi a jQuery script kizárták sorozat egy sapkával asztal (és ez a szám nem nehéz kitalálni, hogy ez csak egy scoreless). Így amint megszabadulunk, akkor a számozás mentünk a megfelelő sorrendben.
De a listán például nem zárja ki sem a sorok, így szembesült ezzel a problémával. Ezért ezt szem előtt tartani, ha használja a módszer jQuery.