Le të supozojmë se e kemi një tabelë nga baza e të dhënave dhe dëshirojmë që të tregohet në faqe rendi çift ndryshe nga ai tek. Për të bërë këtë të mundur ka metoda të shumëta me programim, por në rastin e JQuery është kjo shumë e thjeshtë dhe e lehtë. E vetmja që duhet është që të tregojmë se rendi çift ka stil tjetër nga rendi tek. Gjuha e cila e merr qasjen me bazën e të dhënave dhe kujdeset për tregim nuk ka nevojë të bëjë asgjë. JQuery kujdeset për këtë.
Krijo faqen (gjuha nuk ka dallim) dhe stilin me CSS për rendin çift dhe tek (për shembull):
<style type="text/css">
.rendiÇift {background: #ff7d3e}
.rendiTek {background: #ffb03b}
</style>
Lidhe skedarin JQuery nga faqja e krijuar:
Krijo funksionin i cili kujdeset për tregim të ndryshëm për çift (even) dhe tek (odd). Në shembullin tim e kam përdorur paragrafin (<p>), por ju mund të përdorni edhe listën (<li>), shtresën (<div>) ose rendin e tabelës (<tr>).
<script type="text/javascript">
$(document).ready(function(){
$("p:even").addClass("rendiÇift");
$("p:odd").addClass("rendiTek");
});
</script>
Ky është kodi i plotë për këtë demonstrim
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rendi çift dhe tek</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#rendet p:even").addClass("rendiÇift");
$("#rendet p:odd").addClass("rendiTek");
});
</script>
<style type="text/css">
#rendet {margin: auto; width: 440px; border: 1px solid #999; padding: 10px;}
#rendet p {margin: 0; padding: 10px; color: #fff; font-weight: bold;}
.rendiÇift {background: #ff7d3e}
.rendiTek {background: #ffb03b}
</style>
</head>
<body>
<div id="rendet">
<p>Rendi i parë</p>
<p>Rendi i dytë</p>
<p>Rendi i tretë</p>
<p>Rendi i katërt</p>
<p>Rendi i pestë</p>
</div>
</body>
</html>
Shënimet do të dukeshin kështu pastaj në faqe të uebit, me pamje të ndryshme sipas renditjes. Nëse nuk jeni fillestar mund të shikoni burimin e kësaj faqe dhe natyrisht nëse e përdorni këtë mund ta ndryshoni pamjen sipas qejfit.
Rendi i parė
Rendi i dytė
Rendi i tretė
Rendi i katėrt
Rendi i pestė