De foarte multe ori, tastând mese, trebuie să se facă sub formă de "tabele dungate" - atunci când culoarea rândurilor se alternează una după alta. Această abordare ajută la prezentarea conținutului tabelar într-un mod mai lizibil și mai intuitiv.
Deoarece tabelul se dovedește a fi "dungat", această tehnică este denumită uneori o masă în stil zebră.
În acest articol, vom vorbi despre modul în care sunt implementate aceste tabele.
Mai întâi, să creăm un cadru HTML standard pentru tabelul nostru "dungat" viitor.
Vă atrag atenția asupra faptului că trebuie să înfășurați antetul tabelului în eticheta lui thead. iar conținutul principal al mesei se află în grup. Acesta este tot ceea ce avem nevoie pentru a face mai ușoară înrădăcinarea rândurilor tabelului în viitor.
Și, de asemenea, să scriem stilurile CSS de bază pentru tabel.
Astfel, am creat o masă obișnuită fără rânduri "dungate". Exemplul poate fi vizualizat făcând clic pe butonul "Demo".
Acum, hai să trecem la sarcina principală a acestui articol și vom analiza modul în care este posibil ca rândurile tabelului să fie "dungate"?
Metoda 1 - Masă cu panglici pe jQuery
Pentru o lungă perioadă de timp, această metodă particulară a fost principala decizie în crearea tabelelor "dungate".
Abordarea sa este după cum urmează.
Creăm două reguli CSS care vor fi responsabile pentru setarea fundalului la rânduri paralele și ciudate.
În cazul nostru, am făcut că numerele impare vor fi albe și chiar și albastru.
Și acum trebuie doar să adăugăm un mic script scris în jQuery, care va adăuga o clasă odd_row pentru rânduri ciudate ale tabelului. și pentru even - even_row și astfel masa noastră va deveni "dungi".
Iată scriptul real.
Utilizați selectorul jQuery $ ("table tr: odd"). vom selecta toate rândurile ciudate ale tabelului și cu $ ("table tr: even") - toate cele egale.
De asemenea, acordați atenție construirii nu ("thead tr"). cu ajutorul lui am exclus din eșantionul nostru antetul tabelului, pentru că nu trebuie să îl stilizăm sub tabelul "dungi", pentru că am scris stiluri separate.
Și, de asemenea, să vedem că în selectorul am folosit thead tr (eticheta thead). Când am creat doar un cadru HTML, am observat că capacul tabelului este cel mai bine înfășurat în tad. așa că am făcut acest lucru, pentru ca în această etapă să fie mai ușor să excludem pălăria din eșantion.
În cele din urmă, cu addClass ("even_row") și addClass ("odd_row"), adăugăm clasa corespunzătoare pentru rândurile paralele și ciudate ale tabelului.
Puteți vedea rezultatul în "Demo".
Metoda 2 - Masă cu panglică în CSS
Metoda descrisă mai sus este, desigur, cel mai încrucișat browser și va funcționa în browsere mai vechi, dar are și un dezavantaj mare - este că trebuie să folosim un script jQuery de la o terță parte.
Aceasta nu este întotdeauna o abordare bună, așa că să examinăm al doilea mod de a face o masă "dungi" pe CSS pură.
Pentru a face acest lucru, trebuie doar să adăugăm două reguli la foaia de stil.
Și asta este totul, acum masa noastră a devenit și "dungi".
Întregul secret al acestei metode este de a folosi pseudo-clasa: n-copil. Folosind-o, vom selecta liniile impare și uniforme cu ajutorul CSS-ului și pentru acestea vom seta imediat culoarea de fundal, fără a folosi niciun script.
nth-child (ciudat) - selectează toate rândurile ciudate și le stabilește un fundal alb și: nth-child (even) - selectează chiar și rânduri și stabilește un fundal albastru deschis pentru ele.
În acest sens, rețineți că în tabelul de selecție CSS tbody tr folosim tbody. acest lucru se face tot pentru că nu este nevoie să facem un antet "dungi" al tabelului, facem "dungi" numai acele rânduri care se află în tag-ul tbody.
În ceea ce privește compatibilitatea cu această interfață a browserului, aceasta va funcționa în toate browserele moderne și IE9 +.
Prin urmare, dacă nu aveți nevoie de suport pentru IE8, atunci utilizați-l în siguranță, dacă totuși trebuie să îl sprijiniți, atunci primul mod de a vă ajuta.
Recomandări mici
În cele din urmă, vreau să adaug câteva sfaturi.
În primul rând, abordarea descrisă în acest articol, puteți aplica nu numai pentru a crea tabele "dungi", puteți face, de asemenea, o listă "cu dungi" bullet.
De exemplu, dacă utilizați prima metodă, trebuie doar să modificați scriptul jQuery.
În caz contrar, totul rămâne neschimbat.
Și dacă utilizați cea de-a doua abordare, trebuie să corectați selectorii CSS pentru reguli.
Și în al doilea rând, să acorde o atenție la "Demo" a listelor noastre "dungate". Ai observat ceva?
Când utilizați metoda cu jQuery. la noi primul element al listei a fost vopsit în culoarea albastru deschis și alte culori alternative și la utilizarea unei metode pe CSS pur - primul element are un fundal alb.
De ce elementul inițial al listei are culori diferite pentru diferite metode?
Ca să nu te conducă într-o stupoare, îți voi explica.
Când folosim jQuery, începem numerotarea elementelor de la zero la ultimul.
Asta este, $ ("ul li: ciudat") va selecta toate elementele ciudate. De exemplu: 1, 3, 5, 7, etc. Dar $ ("ul li: even") va selecta toate elementele uniforme pornind de la zero. De exemplu: 0, 2, 4, 6, etc.
Când se utilizează: n-copil nu există element zero, întregul numerotare este de la primul.
Prin urmare, există o astfel de discrepanță, atunci când folosim metoda cu jQuery, primul element este, în esență, un element zero și este perceput ca un element uniform, astfel încât acesta are un fundal albastru deschis.
În exemplul nostru, cu tabele "dungate", nu există nicio discrepanță, pentru că împreună cu dvs. folosind scriptul jQuery excludem rândul cu antetul tabelului (și această serie, nu greu de ghicit, este doar zero în scor). Deoarece am scăpat de ea, atunci numerotarea a mers în ordinea corectă.
Dar în exemplul cu listele, nu am exclude niciuna dintre serii, așa că am intrat în această problemă. Prin urmare, păstrați acest lucru în minte dacă utilizați o metodă cu jQuery.
Articole similare
Trimiteți-le prietenilor: