HTML-taulukon luominen objektitaulukosta

Oletetaan, että meillä on tietty objektitaulukko, esimerkiksi tällainen käyttäjätaulukko:

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

Tehdään tästä taulukosta HTML-taulukko, johon kirjoitamme kuhunkin riviin yksittäisen käyttäjän tiedot.

Tällaisessa tietorakenteessa yleensä käytetään yhtä silmukkaa taulukon läpi ja luodaan jokainen taulukon solu manuaalisesti, näin:

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

Tämä lähestymistapa tarjoaa suuren joustavuuden - voimme itse säädellä tietojen sijaintijärjestystä taulukon soluissa (voimme esimerkiksi vaihtaa nimen ja sukunimen paikkoja).

Lisäksi halutessamme voimme lisätä tapahtumankäsittelijöitä tietyille soluille. Esimerkiksi, sukunimelle varattuun soluun voidaan lisätä jokin toiminto klikkaukselle ja niin edelleen.

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