Obyekt massivindən HTML cədvəlinin yaradılması

Tutaq ki, bizə müəyyən bir obyekt massivi verilib, məsələn, istifadəçilərlə belə bir massiv:

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

Gəlin bu massivdən HTML cədvəli düzəldək, hər sətirə ayrı-ayrı istifadəçinin məlumatlarını yazaq.

Belə bir məlumat strukturu ilə adətən massiv üzrə bir dövr işə salınır və cədvəlin hər xanası əl ilə belə yaradılır:

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 yanaşma böyük çeviklik verir - biz məlumatların cədvəl xanaları üzrə yerləşdirmə qaydasını özümüz tənzimləyə bilərik (məsələn, ad və soyadı yerini dəyişə bilərik).

Bundan əlavə, istəsək, müəyyən xanalara hadisələr əlavə edə bilərik. Məsələn, soyad olan xanaya klikləməklə bəzi əməliyyatlar əlavə etmək olar və s.

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