Erstellung einer HTML-Tabelle aus einem Array von Objekten

Nehmen wir an, wir haben ein bestimmtes Array von Objekten, zum Beispiel dieses Array mit Benutzern:

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

Lassen Sie uns aus diesem Array eine HTML-Tabelle erstellen, in deren jede Zeile wir die Daten eines einzelnen Benutzers schreiben.

Bei einer solchen Datenstruktur wird normalerweise eine Schleife über das Array gestartet und jede Tabellenzelle manuell erstellt, etwa so:

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

Dieser Ansatz bietet große Flexibilität - wir können die Reihenfolge der Daten in den Tabellenzellen selbst regulieren (wir können beispielsweise Vor- und Nachnamen vertauschen).

Darüber hinaus können wir bei Bedarf Ereignisse an bestimmte Zellen hängen. Beispielsweise kann auf eine Zelle mit einem Nachnamen eine Aktion beim Klick gelegt werden und so weiter.

Gegeben ist das folgende Array mit Mitarbeitern:

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

Geben Sie die Elemente dieses Arrays in Form einer HTML-Tabelle aus.

Modifizieren Sie die vorherige Aufgabe so, dass beim Klick auf eine beliebige Zelle mit dem Alter deren Inhalt um 1 erhöht wird.

Modifizieren Sie die vorherige Aufgabe so, dass beim Klick auf eine beliebige Zelle mit dem Gehalt deren Inhalt um 10% erhöht wird.