“Dünya eskisinden kötü değil. Sadece iletişim çok gelişti.”

jQuery ile Tablomuzdan Satır Silelim

Tarih: Mart 2nd, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: | 1 Yorum »

Bu yazımda sizlere çok kolay bir şekilde jQuery kullanarak tablomuzda ki satırları nasıl sileceğimizi göstereceğim. Ancak satır silme işlemini sadece istemci tarafında çalışacak. Tabi isterseniz ajax ile silme işlemini sunucu tarafına da göndererek tamamlayabilirsiniz.

<table width="100%" border="1" bordercolor="#000000" cellspacing="2" cellpadding="2">
<tr>
<td>Sutun1</td>
<td>Sutun2</td>
<td>Silme İşlemi</td>
</tr>
<tr>
<td>Değer1</td>
<td>Değer2</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer3</td>
<td>Değer4</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer5</td>
<td>Değer6</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer7</td>
<td>Değer8</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
</table>

Yukarıdaki kod da klasik bir tablo oluşturduk. Tek fark içerisine bir adet link yerleştirdik. Bu linke silinicekSatır olarak sınıf tanımladık. Bu sınıfı tanımlama nedenimiz jQuery ile yapacağımız sorgularda bize yardımcı olması.

$(document).ready(function() {
$('.silinicekSatir').click(function (){
if (confirm('Silmek istediğinizden emin misiniz?')){
$(this).parent('td').parent('tr').remove();
}
});
});

Yukarıdaki kodu satır satır değerlendirirsek.

  1. Numaralı satırda: Döküman hazırsa ise fonksyionu çalıştır emri veriyoruz. Yani sayfamızın yüklenmesi bittiğinde fonksiyon çalışacaktır.
  2. Numaralı satırda: .silinicekSatır sınıfına sahip elementlere tıklandığında çalışacak olayı tanımladık.
  3. Numaralı satırda: Kullanıcıya yapmak istediği işlem hakkında emin olup olmadığını soruyoruz. Kullanıcı Tamam butonuna basar ise true değeri dönüyor.
  4. Numaralı satırda: Tıklanan linkin ait olduğu satırı aile metodunu kullanarak buluyoruz ve bu satırı siliyoruz.

Hepsi bu kadar! Demo’ya bakmak isterseniz aşağıdaki link den faydalanabilirsiniz.

DEMO


Highcharts İle Verilerimizi Görselleştirelim

Tarih: Ocak 16th, 2010 | Yazar: | Kategoriler: Javascript | Etiketler: , | 1 Yorum »

Eğer sitenizdeki istatistiklerinizi tablo (chart) ile göstermek isterseniz veya herhangi başka bir sebep ile verilerinizi görselleştirmek istiyorsanız ve flash ile değilde javascript ile bunu yapmak istiyorsanız “Highcharts” bunu yapan en iyi uygulamalardan biri.

Pasta, sutün, çubuk, çizelge(areachart) ve çeşitli kombinasyonlar ile oluşturabilceğiniz tabloları Highcharts ile yapabilirsiniz.

Verilerimizi JavaScript Object Notation yapısını kullanarak giriyoruz yani anahtarlar, virgül ve parantez kullanarak.

Highcharts JQuery altyapısını kullanarak çalışıyor zaten sayfanızda JQuery kullanıyorsanız size avantaj sağlayacaktır. Test ettiğim taraycılar ise Internet explorer 6, 7, 8, Opera 10, Firefox 3.5.7, Safari 4.0.4 test ettiğim kadarı ile bunların hiç birinde sorun yok.

Sizde Highcharts kullanmak istiyorsanız aşağıdaki linklerden faydalanabilirsiniz.

Demo

İndir

Highcharts