Daha önceki yazıların birisinde tabloya satır ve kayıt ekleme işlemini javascript dili ile nasıl yaptığımızı göstermiştim. Bu yazıda bu işlemi biraz daha geliştirerek tabloda kayıtları sil butonu nasıl yapacağımızı göstereceğim.
Öncelikle kayıt tabloya kayıt ve satır ekleme yazısını inceleyelim. Yazıya ulaşmak için aşağıdaki bağlantıya tıklayabilirsiniz.
Örnek sayfadaki örnek çalışmanın kodları da şu şekildedir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tasarım Kodlama</title> <style> #sayfa{ width: 500px; margin:auto; background: #ffeaa7; padding:20px; } label{ display:block; margin-top:5px; } input{ width: 200px; height: 25px; font-size:1.2em; } button{ border:none; display:block; margin-top:5px; width: 204px; height: 50px; text-align: center; font-size:1.2em; } table{ background: #0984e3; margin:5px; width: 100%; color:#fff; } td,th{ border:1px solid white; border-spacing: 0px; margin: 0px; } </style> </head> <body> <div id="sayfa"> <label>Ad:</label> <input type="text" id="ad"> <label>Soyad:</label> <input type="text" id="soyad"> <label>Yaş:</label> <input type="number" id="yas"> <button id="ekle">Tabloya Ekle</button> <table id="liste"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> </table> </div> <script> const ad=document.querySelector("#ad"); const soyad=document.querySelector("#soyad"); const yas=document.querySelector("#yas"); const ekle=document.querySelector("#ekle");//tıklama olayı eklenecek const liste=document.querySelector("#liste"); ekle.onclick=function(){ //butona tıklanınca çalıştırılacak //td elementlerini oluşturuyoruz let tAd=document.createElement("td"); let tSoyad=document.createElement("td"); let tYas=document.createElement("td"); tAd.textContent=ad.value;//textboxtan değeri okuyup aktarıyoruz. tSoyad.textContent=soyad.value;//textboxtan değeri okuyup aktarıyoruz. tYas.textContent=yas.value;//textboxtan değeri okuyup aktarıyoruz. //tr elementi oluşturuyoruz let tr=document.createElement("tr"); //tdleri tr içine ekliyoruz tr.appendChild(tAd); tr.appendChild(tSoyad); tr.appendChild(tYas); //tr elementini liste (tablo) içine ekliyoruz liste.appendChild(tr); //nenelerin için eklemeden sonra temizleyelim ad.value=""; soyad.value=""; yas.value=""; //temizlemeden sonra ad içine odaklansın ad.focus(); } </script> </body> </html> |
Bu kodların üzerine ekleme yaparak kodları değiştirmeye başlayalım.
Tabloya sil butonlarını ekleme
İlk olarak yukarıdaki tabloyu güncelleyerek başlıyoruz. Tabloya silme alanı ekliyoruz.
1 2 3 4 5 6 7 8 9 10 | <table id="liste"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> <th>Sil</th> <!-- eklenen alan --> </tr> </table> |
Ardından td element oluşturma aşamasında yeni bir hücrede silme için oluşturuyoruz. Hücrenin içine bir tane de buton ekleyip butona bir olay bağlıyoruz.
Butonda kullanılan olayı sonradan güncelleyeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //td elementlerini oluşturuyoruz let tAd=document.createElement("td"); let tSoyad=document.createElement("td"); let tYas=document.createElement("td"); //yeni eklenen alanlar let tSil = document.createElement("td"); let silBtn =document.createElement("button"); silBtn.textContent="Sil"; tSil.appendChild(silBtn); //butonu td içine ekliyoruz. silBtn.onclick=function(e){ //kodlar eklenecek } |
Hücreyi tablodaki son hücre olarak ekliyoruz.
1 2 3 4 5 6 7 | //tdleri tr içine ekliyoruz tr.appendChild(tAd); tr.appendChild(tSoyad); tr.appendChild(tYas); tr.appendChild(tSil); //eklenen alan. |
Şimdi sil butonunun güncellenmesini yapmaya sıra geldi. Yukarıda oluşturduğumuz olayı tüm satırı silecek şekilde tekrar güncelliyoruz.
1 2 3 4 5 6 | silBtn.onclick=function(e){ //kodlar eklenecek liste.removeChild(this.parentNode.parentNode); } |
Sonuç
Yazdığımız tüm kodları toparlayıp tekrardan açıklayacak olursak. Ek olarak bir tane hücre oluşturup bu hücreye buton ekledik ayrıca bu butona bir tane de olay tanımladık. Bu olay ilgili tablodaki satırda bulunan tr etiketini seçip kaldırmaktadır.
merhaba sizin programınızı biraz değiştirdim, şimdi de verileri girdiğim tabloyu bir butonla emaile göndermek istiyorum nasıl yapabilirim.
Sunucu taraflı script kullanabilirsin. Örn. Php smtp kütüphanesi