JavaScript ile oluşturulan hücrelere ve satırlara text kutularından değerler eklemek için örnek uygulamanın videosunu yada örnek kodlarını aşağıdan ulaşabilirsiniz.
Örnek uygulamada createElement metodu ile td elementleri oluşturulmuştur. Oluşturulan td elementleri ardıdan oluşturulan tr elementine eklenerek sıralı bir şekilde tabloya eklenmiştir.
Ekran Çıktısı:
Örnek Uygulamanın Videosu:
Örnek Uygulamanın Kodlar:
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> |
süperr