Javascript İle Tablo Oluşturma

Javascript İle Tablo Oluşturma

2 Yorum / Genel, JavaScript / Yazan

Tablolar veri sunumu için harika seçeneklerdir. Farklı verileri bir arada göstermek için iyi bir seçenek olarak karşımıza çıkar.

Html ile tablo oluşturmak için table etiketini kullanıyoruz. Bu etiket bir çok alt etiket ile birlikte tablo oluşturmak için kullanılır. Bu yazıyı okuyorsanız bu sizin HTML TABLE etiketini ve Html ile tablo oluşturmayı bildiğinizi gösterir. Yada en azından konu hakkında bilginiz vardır. Eğer yoksa bu konuda bir araştırma yapmanız faydalı olacaktır.

Yazı İçeriği
  1. Javascript İle Tablo Nasıl Oluştururlur?
  2. Javascript Tablo Oluşturma
  3. Javascript Tablo Oluşturma Örneği
  4. Tablo Oluşturmak İçin Bir Fonksiyon Yazlım
  5. Sonuç

Javascript İle Tablo Nasıl Oluştururlur?

Web sayfası içerisinde tablo oluşturmak istendiğinde, Javascript ile farklı yöntemler kullanılabilir.

  • Sabit bir dizi içerisindeki verileri sayfa oluştururlurken ekrana basmak isteyebiliriz. Bu gibi bir durumda Html etiketlerini document.write ile ekrana yazdırabiliriz. document.write('<table>'); tarzı bir kullanım ile tüm bilgileri sayfa oluşturulurken ekrana bastırabiliriz.
  • Html DOM özelliğinden faydalanarak tablo oluşturabiliriz. Bu yöntem ile istediğimiz Html etiketlerini oluşturarak sayfaya istediğimiz zaman ekleyebiliriz. Bunun için createElement() metodu kullanılabilir.
  • Yine Html HTMLTableElement nesnesi kullanılarak da işlem yapabiliriz. Bu bizim kolaylıkla tablo üzerinde işlem yapmamız için geliştirilmiştir.

Javascript yapısı gereği esnek kullanıma müsaittir. Bu nedenle farklı seçenekler çoğu zaman mevcuttur.

Biz bu yazımızda HTMLTableElement nesnesi ile işlem yaparak bir tablo oluşturacağız.

Javascript Tablo Oluşturma

İlk olarak web sayfamızı oluşturalım. Sonrasında da ayrı bir dosyada Javascript kodlarımızı saklarız.

Tablo İçin Web Sayfasını Oluşturma

<!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>Javascript İle Tablo Oluşturma Örneği</title>
  <script src="javascript.js"></script>
</head>
<body>
    <div id="tablo"></div>
</body>
</html>

Sayfamızı boş bir web sayfası olarak tasarladık. Sadece boş bir DIV etiketi oluşturduk. Bu etiketin içerisinde tablomuzu yazacağız.

Yine ayrıca javascript.js dosyasını sayfamıza ekledik. Bu şekilde Javascript kodlarını farklı bir dosyada tutabileceğiz.

Tablo İçerisindeki Veriler

Safamızı oluşturduk. Tabloyu eklemeden önce hangi verileri sunacağımıza bakalım. Bu örneğimizde beş ilin plaka, isim ve nüfus bilgilerini bir tablo içerisinde göstereceğiz. Bu nedenle verimizi bu bilgilerden oluşan bir diziye atayacağız. Şimdi bu diziyi oluşturalım.

const sehirler = [
    {
        plaka: 34,
        sehir: 'İstanbul',
        nufus: 15840901,
    },
    {
        plaka: 6,
        sehir: 'Ankara',
        nufus: 5747325,
    },
    {
        plaka: 35,
        sehir: 'İzmir',
        nufus: 4425789,
    },
    {
        plaka: 16,
        sehir: 'Bursa',
        nufus: 3147818,
    },
    {
        plaka: 41,
        sehir: 'Kocaeli',
        nufus: 2033441,
    }
];

Javascript İle Table Etiketini Oluşturalım

Şimdi Javascript kodlarımıza geçelim. İlk olarak TABLE etiketi oluşturacağız ve bu etiketi tablo id değerine sahip DIV içerisine yerleştireceğiz.

const tablo = document.createElement('table');
const tabloDIV = document.getElementById('tablo');

tabloDIV.appendChild(tablo);

Yaptıklarımızı kısaca inceleyelim.

  • İlk olrak const tablo = document.createElement('table'); satırında bir TABLE etiketi oluşturduk ve bunu tablo değişkenine atadık.
  • Sonra const tabloDIV = document.getElementById('tablo'); satırında web safamız içerisinde bulunan DIV tagını id değerini kullanarak yakaladık.
  • Sonrasında tablomuzu tabloDIV.appendChild(tablo); satırı ile bu DIV içerisine ekledik.

Yaptığımız işlemi bir fonskiyona atayarak işlemimizi daha sonra kullanabileceğimiz bir şekle sokalım. Fonksiyonu yazarken tabloyu ekleyeceğimiz DIV etikenin ID değerini fonksiyonumuza parametre olarak vereceğiz ve dönüşte bize oluşturulan tabloyu geri dönderecek.

const tabloEtiketiniOlustur = (divID) => {
    const tabloElement = document.createElement('table');
    const tabloDIV = document.getElementById(divID);
    tabloDIV.appendChild(tabloElement);
    return tabloElement; // tabloyu geri dön
}

const tablo = tabloEtiketiniOlustur('tablo');

Tablonun Başlık Bölümünü Oluşturalım

Artık elimizde verilerimiz ve web sayfamıza eklemiş olduğumuz bir tablomuz var. Tablo içeriği boş olduğundan sayfa üzerinde göremesekte oluşturduğumuz TABLE etikiti sayfa üzerinde bulunmakta.

Şimdi tablomuza bir başlık alanı ekleyelim. Bunun için tabloyu oluşturduğumuz gibi önce adımları inceleyeceğiz ve sonrasında bu işlemi bir fonksiyona atayacağız.

Şimdi kodlarımızı yazmaya başlayalım. Bir tabloya başlık eklemek için createTHead() metodunu kullanıyoruz.

const tabloBaslik = tablo.createTHead();

Şimdi başlık içerisine bir ROW eklememiz gerekiyor. Bunu

const row = tabloBaslik.insertRow();

şeklinde ekliyoruz ve oluşan satırı row değişkenine atıyoruz.

Başlık olarak sehirler dizimizdeki nesnelerde bulunan özellik isimlerini kullanacağız. id, sehir ve nufus şeklinde olan bu isimleri listeden alacağız. Bunun için dizinin ilk elemanını sehirler[0] diyerek alıyoruz.

const basliklar = Object.keys(sehirler[0]);

Artık elimizde tablo başlıklarında bulunacak isimlerin olduğu bir dizi bulunuyor. Bunu for-of döngüsü içerisinde kullanarak TH etiketlerini ve içerisindeki başlıkları oluşturacağız.

Bu başlık isimlerini oluşturacağımız TH etiketi içerisine ekleyerek sonrasında bu etiketi oluşturduğumuz ROW etiketine ekleyeceğiz.

for(let isim in basliklar) {
    let baslik = document.createTextNode(isim.toUpperCase());
    let th = document.createElement('th');
    th.appendChild(baslik);
    row.appendChild(th);
}

Şimdi bu kodu bir fonksiyona dönüştürelim, fonksiyonumuza işlem yapacağımız tabloyu ve tablo başlıklarını içeren diziyi parametre olarak vereceğiz ve fonskiyonumuz tablonun başlığını oluşturacak.

const tabloBasliginiOlustur = (tablo, veri) => {
  const tabloBaslik = tablo.createTHead();
  const row = tabloBaslik.insertRow();
  for (let element of veri) {
    let baslik = document.createTextNode(element.toUpperCase());
    let th = document.createElement("th");
    th.appendChild(baslik);
    row.appendChild(th);
  }
};

Kodumuzu çalıştırmak için bir onload eventi eklememiz gerekiyor. Aksi halde hata ile karşılaşırız. Aşağıdaki kodu javascript.js dosyasının en sonuna ekleyelim.

window.onload = () => {
  const basliklar = Object.keys(sehirler[0]);
  const tablo = tabloEtiketiniOlustur("tablo");
  tabloBasliginiOlustur(tablo, basliklar);
};

Kodumuzu javascript.js dosyasına ekleyerek çalıştırırsak başlıkları görebileceğiz.

Tablo Başlık Bölümü

Tablonun Gövdesini Javascript İle Oluşturalım

Tablo başlığını oluşturduk. Şimdi tabloya içerik eklememiz gerekiyor. Tablo içeriğini yine adım adım inceleyelim ve sonrasında bir fonksiyona çevirelim.

İlk olarak

const body = tablo.createTBody();

şeklinde bir tablo gövdesi (body) oluşturuyoruz Verileri buraya gireceğiz.

Sonrasında elimizdeki veri tablosu ile (sehirler) bir for of döngüsü oluşturuyoruz. For döngüsünün içeriğini doldurarak ne yaptığımızı açıklayalım.

for(let element of sehirler) {
    let row = body.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let icerik = document.createTextNode(element[key]);
      cell.appendChild(icerik);
    }
}

for of dongüsü her seferinde bize bir şehir bilginisi nesne olarak geri dönderir. Bu nesneyi for in döngüsü içerisine sokarak bu nesnenin tüm özelliklerinden oluşan bir dönü oluştururuz. Örneğimizde bu özellikler id, sehir ve nufus şeklindedir.

Bu döngü içerisinde önce bir

let cell = row.insertCell();

şeklinde bir hücre oluşturuyoruz (td etiketi). Sonrasında bu hücreye eklenecek içeriği oluşturmak için

let icerik = document.createTextNode(element[key]);

bir metin düğümü (textNode) oluşturuyoruz. Buraya dikkat edersek burada elimizdeki element ( örneğimizdeki şehir bilgisi) ve o anki işlem gören özellik (key) bilgisini kullandık ve bir metin düğümü oluşturduk.

Sonrasında bu düğümü oluşturduğumuz hücreye (cell) ekliyoruz.

cell.appendChild(icerik);

Bu işlem **for-in ** döngüsü ile şehir nesnesinin tüm özelliklerine uygulanır ve hepsinden birer hücre oluşturulur.

Her satır için ise for-of döngüsü içerisinden işlem yapıyoruz. Şimdi yaptığımız bu son bölümü bir fonksiyona çevirelim.

const tabloGovdesiniOlustur = (tablo, veri) => {
  const body = tablo.createTBody();
  for (let element of veri) {
    let row = body.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let icerik = document.createTextNode(element[key]);
      cell.appendChild(icerik);
    }
  }
};

Şimdi de onload eventini yeniden düzenleyelim.

window.onload = () => {
  const basliklar = Object.keys(sehirler[0]);
  const tablo = tabloEtiketiniOlustur("tablo");
  tabloBasliginiOlustur(tablo, basliklar);
  tabloGovdesiniOlustur(tablo, sehirler);
};

Artık kodlama bittiğine göre tablomuzu oluşturabiliriz. javascript.js dosyasını düzenledikten sonra sayfayı yenilediğimizde karşımıza aşağıdaki görüntü çıkacaktır.

Şehir Nüfus Tablosu
Şehir Nüfus Tablosu

Oluşturduğumuz fonksiyonlar jenerik olduğu için farklı veri tablolarını da gösterecektir. Burada önemli olan girilen verilerin ve başlıkların bir tablo oluşturacak şekilde düzgün bir şekilde olmasıdır.

Javascript Tablo Oluşturma Örneği

Şimdi yukarıdaki kodları kullanarak farklı bir tablo oluşturalım. Burada sadece veriyi değiştireceğiz ve tablomuzu Javascript oluşturacak.

Bunun için id, isim ve soyad alanlarından oluşan bir tablo oluşturacağız.

const uyeler = [
    {
        id: 1001,
        isim: 'Ali',
        soyad: 'Koşan',
    },{
        id: 1002,
        isim: 'Mehmet',
        soyad: 'Akif',
    },{
        id: 1003,
        isim: 'Cemil',
        soyad: 'Çubukcu',
    },{
        id: 1004,
        isim: 'Hakan',
        soyad: 'Çevik',
    },{
        id: 1005,
        isim: 'Remzi',
        soyad: 'Tutan',
    },
];

İlk yaptığımız çalışmayı kullanıyoruz, sadece yapmamız gereken sehirler dizisi yerine uyeler dizisini kullanmak. Sonuç aşağıdaki gibi olacaktır.

Üyeler Tablosu
Üyeler Tablosu

Tablo Oluşturmak İçin Bir Fonksiyon Yazlım

Son olarak onload eventi içerisinde işlem yapmak yerine tabloyu oluşturmak için bir fonksiyon yazalım. Bu fonksiyon tablonun ekleneceği DIV etiketinin ID değerini ve bir de eklenecek verileri parametre olarak alsın ve sonuç olarak bir tablo oluştursun.

Biz bir butona tıkladığımız zaman bir tablo oluşturalım veya sayfa yüklendiği zaman bir tablo oluşsun. Veya farklı bir tetikleme ile tablonun oluşmasını sağlayalım, seçim uygulamayı geliştirene kalsın.

const tabloOlustur = (divID, veri) => {
    const basliklar = Object.keys(veri[0]);
    const tablo = tabloEtiketiniOlustur("tablo");
    tabloBasliginiOlustur(tablo, basliklar);
    tabloGovdesiniOlustur(tablo, veri);
}

window.onload = () => {
    tabloOlustur("tablo", uyeler);
};

Artık sadece tabloOlustur fonksiyonunu çağırarak bir tablo oluşturabiliriz. Tüm kod şu şekilde olacaktır.

const uyeler = [
    {
        id: 1001,
        isim: 'Ali',
        soyad: 'Koşan',
    },{
        id: 1002,
        isim: 'Mehmet',
        soyad: 'Akif',
    },{
        id: 1003,
        isim: 'Cemil',
        soyad: 'Çubukcu',
    },{
        id: 1004,
        isim: 'Hakan',
        soyad: 'Çevik',
    },{
        id: 1005,
        isim: 'Remzi',
        soyad: 'Tutan',
    },
];

const tabloEtiketiniOlustur = (divID) => {
  const tabloElement = document.createElement("table");
  const tabloDIV = document.getElementById(divID);
  tabloDIV.appendChild(tabloElement);
  return tabloElement; // tabloyu geri dön
};

const tabloBasliginiOlustur = (tablo, veri) => {
  const tabloBaslik = tablo.createTHead();
  const row = tabloBaslik.insertRow();
  for (let element of veri) {
    let baslik = document.createTextNode(element.toUpperCase());
    let th = document.createElement("th");
    th.appendChild(baslik);
    row.appendChild(th);
  }
};

const tabloGovdesiniOlustur = (tablo, veri) => {
  const body = tablo.createTBody();
  for (let element of veri) {
    let row = body.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let icerik = document.createTextNode(element[key]);
      cell.appendChild(icerik);
    }
  }
};

const tabloOlustur = (divID, veri) => {
    const basliklar = Object.keys(veri[0]);
    const tablo = tabloEtiketiniOlustur("tablo");
    tabloBasliginiOlustur(tablo, basliklar);
    tabloGovdesiniOlustur(tablo, veri);
}

window.onload = () => {
    tabloOlustur("tablo", uyeler);
};

Javascript Butona Tıklandığında Tablo Oluşturma

Bir butona tıklandığında tablo oluşturmak için yapmamız gereken işlem ise şu şekilde olacaktır.

<button onClick="tabloOlustur('tablo', uyeler)"}>Üye Tablosu</button>

Yukarıdaki kodu web safası içerisine koyalım. Sonrasında

window.onload = () => {
    tabloOlustur("tablo", uyeler);
};

event tanımlamasını javascript.js dosyasından silelim. Sayfayı yeniledeğimizde butonumuz sayfada görüntülenecektir. Butona tıkladığımızda tablo oluşturulacaktır.

Sonuç

Javascript ile bir tablo oluşturmak hem kolay ve hemde oldukça esnektir. Bir tablo oluşturulduktan sonra ona yeni satırlar eklenebilir veya var olan satır tablodan silinebilir. Bu yazımızda adım adım Javascript ile tablo oluşturmayı inceledik.

Farklı bir çalışma için JavaScript for Döngüsü İle Tablo Oluşturma başlıklı yazımıza bakabilirsiniz.

Javascript ile tablo oluşturma konusunda soracaklarınızı veya ekleyeceklerinizi yorumlardan bize ulaştırabilirsiniz.

2 thoughts on “Javascript İle Tablo Oluşturma”

  1. Recep

    Merhaba,
    Öncelikle emeğinize sağlık çok güzel çalışma.
    En sondaki Javascript Tablo Oluşturma Örneği başlığı altındaki kodları kullanarak gerekli örneği oluşturdum. Peki burada ID – İSİM – SOYİSİM sütunları var bunları arttırmak için kodlar nasıl olmalı bu yazınıza nasıl yapıldığını eklerseniz harika olur.

    Çok teşekkürler şimdiden, selamlar.

    Yanıtla
    1. selami

      Merhaba.
      Bu kod ile yeni bir kolon, mesale “yaş”, eklemeniz oldukça kolay. Yapmanız gereken sadece verilere yaş bilgisini eklemek. Gerisini kod kendisi halledecektir. Çünkü tablo başlık ve içerikleri veriye göre oluşturuluyor.

      const uyeler = [
      {
      id: 1001,
      isim: ‘Ali’,
      soyad: ‘Koşan’,
      yas: 19,
      },{
      id: 1002,
      isim: ‘Mehmet’,
      soyad: ‘Akif’,
      yas: 15,
      },{
      id: 1003,
      isim: ‘Cemil’,
      soyad: ‘Çubukcu’,
      yas: 21,
      },{
      id: 1004,
      isim: ‘Hakan’,
      soyad: ‘Çevik’,
      yas: 19,
      },{
      id: 1005,
      isim: ‘Remzi’,
      soyad: ‘Tutan’,
      yas: 17,
      },
      ];

      şeklinde veriyi girdiğinizde tabloda yaş sütünu da oluşacaktır. İyi günler.

      Yanıtla

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir