Penciptaan Jadual HTML daripada Array Objek

Katakan kita mempunyai array objek tertentu, contohnya, array pengguna seperti berikut:

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

Mari kita buat jadual HTML daripada array ini, di mana setiap baris kita akan catat data untuk setiap pengguna.

Dengan struktur penyimpanan data seperti ini, biasanya satu gelung dijalankan melalui array dan setiap sel jadual dicipta secara manual, seperti berikut:

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);
}

Pendekatan ini memberikan fleksibiliti yang besar - kita boleh mengawal susunan data dalam sel jadual sendiri (kita boleh, sebagai contoh, menukar tempat nama dan nama keluarga).

Selain itu, jika mahu, kita boleh melekatkan peristiwa pada sel tertentu. Sebagai contoh, kita boleh melekatkan beberapa tindakan pada sel dengan nama keluarga untuk klik dan sebagainya.

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