Verileri toplu bir şekilde göstermek için tabloları kullanıyoruz. Bunun için HTML bize table etiketini sunmuştur. Fakat HTML statik bir dil olduğu için tabloları elle oluşturmamız gerekiyor.
Fakat yine de biz dinamik olarak tabloları elimizdeki verileri kullanarak JavaScript ile oluşturabiliriz. Bu yazımızda javascript for döngüsü ile tablo oluşturmayı göreceğiz.
for Döngüsü İle Tablo Oluşturma Örneği
İlk örneğimizde elimizde olan rekler dizisini bir tablo olarak sayfamıza yazdıracağız. İlk olarak dizimizi oluşturalım.
const renkler = ["Beyaz", "Siyah", "Kırmızı", "Mavi", "Yeşil"];
Renklerimizi oluşturduğumuza göre tablomuzu oluşturmaya başlayabilirizi. Tabloyu oluştururken JavaScript document.write metonudu kullanacağız. Bu metod ile HTML websayfasının bulunulan bölümüne ekleme yapabiliyoruz.
for(let i=0; i < renkler.length; i++) {
}
Döngüyü 0 dan başlatıyoruz. Çünkü dizilerin indeks 0 dan başlamaktadır. Döngümüz 0 dan başlayıp döngü değişkeninin değeri renkler dizisinin boyutundan küçük olduğu sürece devam edecektir.
Şimdi tablomuzu nasıl ekleyeceğimizi görelim.
<script>
const renkler = ["Beyaz", "Siyah", "Kırmızı", "Mavi", "Yeşil"];
document.write("<table>");
document.write("<thead>");
document.write("<tr><th>Satır</th><th>Renk</th></tr>");
document.write("</thead>");
document.write("<tbody">);
for(let i=0; i < renkler.length; i++) {
document.write("<tr>");
document.write("<td>" + ( i + 1 ) + "</td>");
document.write("<td>" + renkler[i] + "</td>");
document.write("</tr>");
}
document.write("</tbody>");
document.write("</table>");
</script>
Bu kodu tam bir HTML sayfası içerisinde body tagı içerisine eklediğimizde bize renkler tablosunu oluşturacaktır. Burada satır numarası oluşturmak için döngü değişkenine 1 eklemeyi tercih ettik, i+1. Ayrıca renge ulaşmak için renkler dizisi içerisinde döngü değişkenini kullandık, renkler[i] şeklinde.
for Döngüsü İle Dizi İçerisinde Bulunan Nesneden Tablo Oluşturma
Şimdi elimizdeki array içerisinde bir nesne olduğu (object) bir örnek oluşturalım. Nesnemiz üye bilgilerini tutsun ve id, isim, yas bilgileri bulunsun. Şimdi önce dizimizi oluşturalım.
const uyeler = [
{
id: 1001,
isim: "Ahmet Nuri",
yas: 25
},
{
id: 1002,
isim: "Hakan Haklı",
yas: 29
},
{
id: 1003,
isim: "Cemil Zorbey",
yas: 23
},
{
id: 1004,
isim: "Zafer Kormaz",
yas: 25
},
{
id: 1005,
isim: "Abdulhamid Albayrak",
yas: 23
}
]
Elimizde uyeler dizisi olduğuna göre artık bu diziyi JavaScript for döngüsü ile yazdırabiliriz.
const uyeSayisi = uyeler.length;
document.write("<table">);
document.write("<thead>");
document.write("<tr>");
document.write("<th>ID</th>");
document.write("<th>İSİM</th>");
document.write("<th>YAŞ</th>");
document.write("</tr>");
document.write("</thead");
document.write("<tbody>");
for(let i = 0; i < uyeSayisi; i++) {
document.write("<tr>");
document.write("<td>" + uyeler[i].id + "</td>");
document.write("<td>" + uyeler[i].isim + "</td>");
document.write("<td>" + uyeler[i].yas + "</td>");
document.write("</tr>");
}
document.write("</body>");
document.write("</table">);
Dikkat ederseniz iki örneğimizde de tablonun sabit bölümlerini for döngüsü dışarısında yazdık. Döngü içerisinde sadece dizi içerisinde bulunan veriyi kullandık.
İlk örneğimizden farklı olarak, döngü içerisinde uyeler[i] kullanarak bir nesneye (obje) ulaştığımız için içerisindeki bize faydalı olan bilgileri almak için bu nesneyi kullanıyoruz. Bunun içinde uyeler[i].id gibi bir yazım kullanıyoruz.
Sonuç
JavaScript for döngüsü ile array içerisindeki kayıtlı bilgileri rahatlıkla bir tablo haline getirerek web sayfamıza yazdırabiliriz. Bunun için web sayfasının kodun bulunduğu alanına etiket ve yazı yazmak için kullandığımız document.write metodunu kullanabiliriz.
Javascript İle Tablo Oluşturma yazımızda tablo oluşturmanın farklı yöntemlerini inceliyoruz.
Sorularınız mı var? Yorumlardan bize ulaşabilirsiniz.
For döngüsü İle dizi İçerisinde bulunan nesnelerden oluşturduğumuz tabloya yeni dizi nesnesi nasıl eklenir?
Diziye yeni bir nesne ekleyip sonra tabloyu tekrar oluşturabiliriz. Bunun için tabloyu oluşturacağımız bir fonksiyon yazabilir ve sonra tabloyu yeniden oluşturmak istediğimizde diziyi ona geçebiliriz. Böylece esnek bir kullanım alanı elde edebiliriz.
Bu işlemi aşağıdaki örnekte görebilirsiniz. Tabloyu bir div içerisine yazdırıyoruz. Eğer daha sonra üye bilgisi değişirse, tekrar uyeTablosunuOlustur fonksiyonunu çağırabiliriz. Böylece tablo içeriği değişecektir. Örnek kod ve açıklamaları aşağıdadır.
Tüm kodları BODY etiketleri arasına ekleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="uyeler"></div>
<script>
const uyeler = [
{
id: 1001,
isim: "Ahmet Nuri",
yas: 25,
},
{
id: 1002,
isim: "Hakan Haklı",
yas: 29,
},
{
id: 1003,
isim: "Cemil Zorbey",
yas: 23,
},
{
id: 1004,
isim: "Zafer Kormaz",
yas: 25,
},
{
id: 1005,
isim: "Abdulhamid Albayrak",
yas: 23,
},
];
const uyeTablosunuOlustur = (uyeler) => {
const tabloDiv = document.getElementById("uyeler");
// Divin içeriğini silelim
tabloDiv.textContent = "";
// Bir tablo oluşturalım
const tablo = document.createElement("table");
tablo.width = "500px";
// tablo body bölümünü oluşturalım
const tabloBody = document.createElement("tbody");
// body bölümünü tabloya ekleyelim.
tablo.appendChild(tabloBody);
for (let uye of uyeler) {
// Satır oluşturalım
let tr = document.createElement("tr");
// Satırı tablo bodysine ekleyelim
tabloBody.appendChild(tr);
// ID hücresini oluşturalım
let idTD = document.createElement("td");
// İçeriği oluşturalım
let idText = document.createTextNode(uye.id);
// İçeriği hücreye ekleyelim
idTD.appendChild(idText);
// Hücreyi satıra ekleyelim
tr.appendChild(idTD);
// İsim hücresini oluşuralım.
let isimTD = document.createElement("td");
// İçeriği oluşturalım
let isimText = document.createTextNode(uye.isim);
// İçeriği hücreye ekleyelim
idTD.appendChild(isimText);
// Hücreyi satıra ekleyelim
tr.appendChild(isimTD);
// Yas hücresini oluşturalım
let yasTD = document.createElement("td");
// İçeriği oluşturalım
let yasText = document.createTextNode(uye.yas);
// İçeriği hücreye ekleyelim
yasTD.appendChild(yasText);
// Hücreyi satıra ekleyelim
tr.appendChild(yasTD);
}
// Tabloyu dive ekleyelim
tabloDiv.appendChild(tablo);
};
uyeTablosunuOlustur(uyeler);
</script>
</body>
</html>