[Çözüldü] jQuery'de addClass kullanımı

Başlatan Timur, 06 Şubat 2012 - 12:17:30

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

Yazdır
Aşağı git Sayfa1
Kullanıcı Eylemleri

Timur

06 Şubat 2012 - 12:17:30 Son düzenlenme: 06 Şubat 2012 - 15:34:44 Timur
bir html tablosunun okunurluğunu artırmak için jQuery'de o tablonun satırlarının renklendirilmesini yapmaya çalışıyorum. Mesela 1. 3. 5. satırların renkleri aynı olacak. 0. 2. 4. renkleri de birbirleriyle aynı olacak. Bunu şöyle yapabiliyorum:

Kod Seç

$(document).ready(function(){
$('#tableId tbody tr:odd').css('background-color','#dddddd');
});


Fakat bunun için aşağıdaki gibi bir css style ekleyip, onu çağırmaya çalıştığımda işe yaramıyor arkadaşlar. Nerede yanlış yaptığımı söyleyebilirseniz çok sevinirim.

Kod Seç

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<style>

.styleZebra {
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
}

</style>

<script>
$(document).ready(function(){

$("#tableId tbody tr").addClass("styleZebra");
});
</script>
</head>

alquirel

#1
06 Şubat 2012 - 14:22:01
Bu kodda düzeltmeniz gereken kısım jQuery değil, CSS malesef :)
Şu hâle getirirseniz sorun kalmaz muhtemelen.

Kod Seç

.styleZebra tr:nth-child(even) {background: #CCC}
.styleZebra tr:nth-child(odd) {background: #FFF}


Burada .styleZebra, table elemanının class özelliği olacak.
CSS'te bu şekilde konan boşluklar şu anlama gelir : class özelliği styleZebra olan elemanın, tr türünde olan alt elemanlarına bu stili uygula.

Tabii ki bu durumda jQuery'de de şu değişikliği yapmanız gerekiyor.

Kod Seç

$("#tableId").addClass("styleZebra");


Yani tbody ve tr kelimelerini çıkartmanız gerekiyor.

Timur

#2
06 Şubat 2012 - 14:36:48
sizin dediğiniz üzere şu hale getirdim ancak işe yaramadı  ???

Kod Seç

<style>
.styleZebra tr:nth-child(even) {background: #CCC}
.styleZebra tr:nth-child(odd) {background: #FFF}
</style>

<script>

$(document).ready(function(){
//$('#tableId tbody tr:odd').css('background-color','#dddddd');

$("tableId").addClass("styleZebra");
});

</script>

alquirel

#3
06 Şubat 2012 - 14:54:38
jQuery'de seçicilere göz attınız mı?

Mesela # işareti ile "id" özelliği o ifade olanlar seçilir.
. (nokta) işareti ile "class" özelliği o ifade olanlar seçilir.
İkisi de yoksa etiket ismiyle seçilir.

Yani $("tableId") şeklinde kullanabilmeniz için sayfanızda şöyle bir etiket olması lazım.
<tableId>...</tableId>

Kaldı ki, bu amaç için ille de jQuery kullanmanız da gerekmez. HTML sayfası oluşturulurken table etiketini şu şekilde yazdırmanız yeterli.
<table class="styleZebra">...</table>

Timur

#4
06 Şubat 2012 - 15:21:14
seçicilere çalıştım hocam. bunu sadece css ile de yapabiliyorum fakat addClass kullanmak istemiştim. Son yazdığım kodda şöyle bir değişiklik yapınca çalışıyor. # işareti dikkatimden kaçmış  ;D teşekkürler

Kod Seç

$(document).ready(function(){

$("#tableId").addClass("styleZebra");
});

alquirel

#5
06 Şubat 2012 - 15:26:47
Tamamdır o halde ;)
Bu başlığı ve diğer başlığınızı Web Tasarım bölümümüze taşıdım.

jQuery'nin kendi belgelendirme (documentation) sitesi her türlü bilgiyi ve örneği içeriyor aslında.
Oraya daha fazla ağrılık vermeniz hem daha fazla şey öğrenmenizi, hem de zaman kazanmanızı sağlar.

Ayrıca bu tür denemelerde hataları takip için Firebug eklentisini kullanmanızı şiddetle tavsiye ederim.
Hem Firefox hem de Chrome'a yüklenebiliyor.

Eğer sormak istediğiniz başka bir şey yoksa Çözüldü etiketi ekleyebilirsiniz.
http://forum.ubuntu-tr.net/index.php?topic=31789.0

Timur

#6
06 Şubat 2012 - 15:33:13
Yok hocam, eyvallah.

jQuery'nin kendi dökümantasyonu bana biraz karmaşık geliyor bazen. o yüzden anında buraya geliyorum. firebug'ı da yeni kurdum zaten, onu kurcalarken gördüm hatayı  :D
Yazdır
Yukarı git Sayfa1
Kullanıcı Eylemleri