Стварэнне HTML табліцы з масіва аб'ектаў

Няхай у нас дадзены нейкі масіў аб'ектаў, напрыклад, вось такі масіў з карыстальнікамі:

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

Давайце зробім з гэтага масіва HTML табліцу, у кожны радок якой запішам даныя асобнага карыстальніка.

Пры такой структуры захоўвання даных звычайна запускаюць адзін цыкл па масіве і ствараюць кожную ячэйку табліцы ўручную, вось так:

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

Такі падыход дае вялікую гнуткасць - мы можам самі рэгуляваць парадак размяшчэння даных па ячэйках табліцы (можам, напрыклад, памяняць месцамі імя і прозвішча).

Акрамя таго, пры жаданні мы можам навязваць падзеі на пэўныя ячэйкі. Напрыклад, можна на ячэйку з прозвішчам навязваць нейкае дзеянне па кліку і гэтак далей.

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