“Bir zamanlar kızların da iğrenç olduğunu düşünmüştünüz”
by Paco Underhill - Neden Satın Alırız? S. 216

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


Bir Yorum Var

  1. 1 Meraklı said at 15:54 on Kasım 28th, 2013:

    Kod çok güzel fakat şunu birde mysql ile yapabilirmisiniz? Bir türlü beceremedim.


Yorum Yap