Nesne Dizisinden HTML Tablosu Oluşturma

Bize belirli bir nesne dizisi verildiğini varsayalım, örneğin, kullanıcılarla ilgili şu dizi:

javascriptlet users = [
  {
    name: 'name1',
    surname: 'surname1',
    patronymic: 'patronymic1'
  },
  {
    name: 'name2',
    surname: 'surname2',
    patronymic: 'patronymic2'
  },
  {
    name: 'name3',
    surname: 'surname3',
    patronymic: 'patronymic3'
  },
];

Bu diziden bir HTML tablosu yapalım, her satıra ayrı bir kullanıcının verilerini yazalım.

Bu tür veri saklama yapısında genellikle dizi üzerinde bir döngü başlatılır ve her tablo hücresi manuel olarak şu şekilde oluşturulur:

html<table id="table"></table>

javascriptlet table = document.getElementById('table');

for (let user of users) {
  let tr = document.createElement('tr');
  
  let td1 = document.createElement('td');
  td1.textContent = user.name;
  tr.appendChild(td1);
  
  let td2 = document.createElement('td');
  td2.textContent = user.surname;
  tr.appendChild(td2);
  
  let td3 = document.createElement('td');
  td3.textContent = user.patronymic;
  tr.appendChild(td3);
  
  table.appendChild(tr);
}

Bu yaklaşım büyük esneklik sağlar - verilerin tablo hücreleri içindeki sırasını kendimiz ayarlayabiliriz (örneğin, ad ve soyadı yer değiştirebiliriz).

Ayrıca, istersek belirli hücrelere olaylar ekleyebiliriz. Örneğin, soyadı yazan hücreye tıklama ile bir işlem ekleyebiliriz ve benzeri.

javascriptlet employees = [
  {name: 'employee1', age: 30, salary: 400},
  {name: 'employee2', age: 31, salary: 500},
  {name: 'employee3', age: 32, salary: 600},
];