HTML-taulukon luominen objektitaulukosta

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

let 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:

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

let 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.

Annettuna on seuraava työntekijätaulukko:

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

Esitä tämän taulukon elementit HTML-taulukon muodossa.

Muokkaa edellistä tehtävää siten, että mihin tahansa ikää sisältävään soluun klikatessa sen sisältö kasvaa 1:llä.

Muokkaa edellistä tehtävää siten, että mihin tahansa palkkaa sisältävään soluun klikatessa sen sisältö kasvaa 10%:lla.