Δημιουργία πίνακα HTML από πίνακα αντικειμένων

Ας υποθέσουμε ότι έχουμε έναν πίνακα αντικειμένων, για παράδειγμα, έναν τέτοιο πίνακα με χρήστες:

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

Ας δημιουργήσουμε από αυτόν τον πίνακα έναν πίνακα HTML, σε κάθε σειρά του οποίου θα γράψουμε τα δεδομένα ενός μεμονωμένου χρήστη.

Με μια τέτοια δομή αποθήκευσης δεδομένων συνήθως τρέχουμε έναν βρόχο στον πίνακα και δημιουργούμε κάθε κελί του πίνακα χειροκίνητα, έτσι:

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

Αυτή η προσέγγιση δίνει μεγάλη ευελιξία - μπορούμε να ρυθμίσουμε μόνοι μας τη σειρά τοποθέτησης των δεδομένων στα κελιά του πίνακα (μπορούμε, για παράδειγμα, να αλλάξουμε θέση μεταξύ ονόματος και επωνύμου).

Επιπλέον, αν θέλουμε μπορούμε να προσθέτουμε γεγονότα σε συγκεκριμένα κελιά. Για παράδειγμα, μπορούμε σε ένα κελί με επώνυμο να προσθέσουμε κάποια δράση με κλικ και ούτω καθεξής.

Δίνεται ο ακόλουθος πίνακας με εργαζόμενους:

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

Εμφανίστε τα στοιχεία αυτού του πίνακα σε μορφή πίνακα HTML.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε με κλικ σε οποιοδήποτε κελί με ηλικία το περιεχόμενό του να αυξάνεται κατά 1.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε με κλικ σε οποιοδήποτε κελί με μισθό το περιεχόμενό του να αυξάνεται κατά 10%.