Bu yazımızda jQuery filtreleme fonksiyonlarından ".filter()" kullanarak, daha önce basit filtreleme ile yaptığımız tablo zebra desen (farklı satır arka plan rengi) uygulamasını tekrar yapacağız.
Filtreleme fonksiyonları:
- .eq(index), .eq(-index) //Girilen indeks numaralı nesneyi seçer.
- .has() //İçerisinde girilen nesneye sahip olan nesneleri seçer
- .filter(selector) //Girilen nesne/nesneleri seçer.
- .filter(function(index)) //İçerisine girilen fonksiyonun gereğini yapar.
- .is() //Seçilen nesnennin verilen özelliğinin olup olmadığını bakar.
- .each() //Girilen nesne içerisinde döngü kurar.
- .first() //Girilen seçicinin ilk nesnesini döndürür.
- .last() //Girilen seçicinin son nesnesini döndürür.
- .map() //Belirtilen seçme işlemine uymyan nesneleri döndürür.
- .not() //Animasyon halindeki nesneleri seçer
- .slice() //İki adet indeks noktası arasındaki nesneleri seçer
Uygulama (.filter()):
jQuery Basit Filtreleme ile yaptığımız zebra desen uygulamasını filtreleme fonksiyonu kullanarak yapalım:
| # | Ders | Konu | Bölüm |
|---|
| 1- | JQuery Giriş | jQuery API açıklamalar | jQuery |
| 2- | Html Dom Nesne | Nesne Açıklamaları | JS |
| 3- | PHP ve Mysql | MySQL ile Veritabanı bağlantısı | PHP |
| 4- | Html Dom Nesne | Nesne Açıklamaları | JS |
| 5- | PHP ve Mysql | MySQL ile Veritabanı bağlantısı | PHP |
| 6- | JQuery Giriş | jQuery API açıklamalar | jQuery |
CSS yapısı:
#zebra{
border-collapse:collapse
}
HTML yapısı:
<table id="zebra">
<thead><tr><th>#</th><th>Ders</th><th>Konu</th><th>Bölüm</th></tr></thead>
<tr><td>1-</td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
<tr><td>2-</td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td>3-</td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
<tr><td>4-</td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td>5-</td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
<tr><td>6-</td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
</table>
jQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
$('#zebra tr').filter(":odd").css({"background-color":"orange"});
});
</script>
Açıklamalar:
- 3. "zebra" id'li tablonun satır etiketini(tr) seçtik, filtreleme fonksiyonu (filter) ile basit filtreleme özelliğinden de yararlanarak, tek (":odd") index sayılı satırların arkaplan rengini "turuncu" yaptık.
Kolay gelsin, görüşmek üzere...
