Creación de una tabla HTML a partir de un array de objetos

Supongamos que tenemos un array de objetos, por ejemplo, este array con usuarios:

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

Hagamos una tabla HTML a partir de este array, donde en cada fila escribamos los datos de un usuario individual.

Con esta estructura de almacenamiento de datos normalmente se ejecuta un ciclo a través del array y se crea cada celda de la tabla manualmente, así:

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

Este enfoque ofrece una gran flexibilidad: podemos regular nosotros mismos el orden de disposición de los datos en las celdas de la tabla (podemos, por ejemplo, intercambiar el nombre y el apellido).

Además, si lo deseamos, podemos agregar eventos a celdas específicas. Por ejemplo, podemos asignar alguna acción al hacer clic en la celda del apellido, y así sucesivamente.

Dado el siguiente array con empleados:

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

Muestre los elementos de este array en forma de tabla HTML.

Modifique el problema anterior para que al hacer clic en cualquier celda con edad, su contenido aumente en 1.

Modifique el problema anterior para que al hacer clic en cualquier celda con salario, su contenido aumente en 10%.