JavaScript ile Dinamik Tablo Oluşturma

JavaScript kullanarak dinamik olarak tablo oluşturmak, kullanıcı girişine veya harici kaynaklardan alınan verilere göre adaptasyon sağlayan, tablo yapısı üzerinde benzersiz bir esneklik ve kontrol sunar. Bu, statik HTML tablolarının sınırlamalarının ötesine geçer.

İçerik Tablosu

1. HTML Tablo Etiketleri: Hızlı Bir Bakış
2. JavaScript ile Tablo Oluşturma
3. Gelişmiş Tablo İşleme Teknikleri

HTML Tablo Etiketleri: Hızlı Bir Bakış

JavaScript’e dalmadan önce, tablo oluşturmada kullanılan temel HTML etiketlerini tekrar gözden geçirelim. Temel bir HTML tablosu şu temel öğelerden oluşur:

• <table>: Tüm tablonun kapsayıcısı.
• <tr>: Bir tablo satırı tanımlar.
• <th>: Bir tablo başlık hücresi belirtir (genellikle kalın ve ortalanmış).
• <td>: Bir tablo veri hücresi temsil eder.

İşte basit bir örnek:

<table>
  <tr>
    <th>Ad</th>
    <th>Yaş</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
</table>

JavaScript ile Tablo Oluşturma

JavaScript, kapsamlı HTML yazmadan satır, sütun ve veri eklemek için Belge Nesne Modeli’ni (DOM) manipüle ederek, bu HTML öğelerini programlı olarak oluşturmamızı sağlar. Aşağıdaki fonksiyon bunu göstermektedir:

function createTable(data, targetElementId) {
  const table = document.createElement('table');
  const headerRow = table.insertRow();

  //İlk nesnenin anahtarlarından dinamik olarak başlık satırı oluştur
  const keys = Object.keys(data[0]);
  keys.forEach(key => {
    const headerCell = headerRow.insertCell();
    headerCell.textContent = key;
  });

  data.forEach(row => {
    const dataRow = table.insertRow();
    keys.forEach(key => {
      const dataCell = dataRow.insertCell();
      dataCell.textContent = row[key];
    });
  });

  document.getElementById(targetElementId).appendChild(table);
}

const myData = [
  { Ad: "John Doe", Yaş: 30, Şehir: "New York" },
  { Ad: "Jane Smith", Yaş: 25, Şehir: "Londra" },
  { Ad: "Peter Jones", Yaş: 40, Şehir: "Paris" }
];

createTable(myData, 'myTableContainer'); //HTML'nizde id="myTableContainer" olan bir div belirtin

Tabloyu eklemek için HTML’nize “myTableContainer” kimliğine sahip bir div eklemeyi unutmayın.

Gelişmiş Tablo İşleme Teknikleri

Bu temel örnek önemli ölçüde geliştirilebilir. Şunları içeren özellikler düşünün:

• Stil Uygulama: Görünümü özelleştirmek için CSS uygulayın (örneğin, sınıflar veya satır içi stiller kullanarak).
• Olay İşleme: Başlıklara tıklayarak sütunları sıralama veya kullanıcı girişine göre satırları filtreleme gibi etkileşimli özellikler ekleyin.
• Sayfalama: Büyük veri kümelerini sayfalar halinde görüntüleyerek yönetin.
• Veri Kaynakları: Tabloyu dinamik olarak doldurmak için API’lerden veya veritabanlarından veri alın.

HTML, CSS ve JavaScript’i birleştirerek, özel gereksinimlerinize göre uyarlanmış, oldukça dinamik ve duyarlı tablolar oluşturabilirsiniz.