Pentru că a trecut ceva vreme de când am scris ultimul post referitor la jQuery, am revenit cu un mic tutorial, dar foarte eficient după părerea mea, despre tabele. Ştiu că nu mai sunt "la modă", dar mi se pare relativ stupidă folosirea <div>-urilor pentru afişarea informaţiilor care necesită un tabel.

Acestea fiind zise, astăzi o să facem următoarele:

• o să stilizăm un tabel obişnuit (CSS aplicat cu jQuery)
• o să-i dăm o notă mai accentuată rândului pe care ne poziţionăm mouseul
• o să-i adăugăm un selector

Bun, să începem cu tabelul. Eu am făcut un tabel obişnuit cu nişte valori random. Rezultatul îl puteţi vedea mai jos.

 
<table>
<tbody>
<tr>
<th>first name</th>
<th>last name</th>
<th>city</th>
</tr>
<tr>
<td>john</td>
<td>doe</td>
<td>the "big apple"</td>
</tr>
<tr>
<td>anne</td>
<td>robinson</td>
<td>the city of angels</td>
</tr>
</tbody>
</table>
 

Bun. Acum o să facem câteva clase CSS pentru tabelul nostru. În primul rând ne trebuie o clasă pentru rândurile pare şi una pentru rândurile impare ca să-i dăm un mic contrast să poată fi citit cu uşurinţă. ( Ca sugestie, încercaţi să faceţi abstracţie de culori pentru că nu prea sunt "pe domeniul meu" )

.odd { background: #D1E6E7; }
.even { background: #94d1e6; }

Acum să facem ceva ca să dăm o notă mai accentuată rândului peste care ţinem mouseul. Voi denumi această clasă mouseover.

.mouseover { background: #fff395; }

Şi suntem aproape gata...ne mai trebuie totuşi o ultimă clasă care să ne permită "selectarea" rândului dorit. O să-i spunem click.

.click { background: #feb40c; font-weight: bold; }

Ok, acum deţinem tot CSS-ul de care avem nevoie, urmează să-l convingem pe jQuery să facă treaba în locul nostru În principiu azi o să folosim funcţiile addClass(), removeClass(), mouseover(), mouseout() şi toggle(). Documentaţie pentru ele găsiţi pe documentaţia jQuery.

Să ne gândim cam ce ar trebui să facem noi cu jQuery...în primul rând să asociem clasele odd şi even rândurilor de care aparţin (în speţă, cele impare şi cele pare), să punem clasa mouseover pe aceste rânduri când trece mouseul, şi s-o scoatem când nu mai e mouseul deasupra. Acest lucru se face cam aşa:

$("tr:even").addClass("even")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });
 
$("tr:odd").addClass("odd")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });

Ne mai rămâne să facem "selectorul". Ideea e simplă: când dai click pe un rând îşi schimbă culoarea, iar când faci al doilea click pe acelaşi rând revine la normal. jQuery are implementată o funcţie care se cheamă toggle() şi care face exact ce ne trebuie! Haideţi să vedem cum arată...

$("tr").toggle(
function ()
{
	$(this).addClass("click");
},
function ()
{
	$(this).removeClass("click");
}
);

Şi cam asta a fost tot! Nu-mi spuneţi că vă aşteptaţi să fie mai complicat E destul de simplu când foloseşti o librărie care-şi uşurează munca.

Ok, acum haideţi să vă arăt şi rezultatul final. Pentru a vedea mai multe detalii nu vă rămâne decât să vă uitaţi peste sursă. Pentru alte detalii, formularul de jos vă aşteaptă să-l folosiţi!