オブジェクトの配列からのHTMLテーブル作成

あるオブジェクトの配列が与えられているとします。例えば、以下のようなユーザーの配列です：

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

この配列からHTMLテーブルを作成しましょう。各行に個別のユーザーのデータを記録します。

このようなデータ構造では、通常、配列に対して1つのループを実行し、各テーブルセルを手動で作成します。以下のように：

<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%増加するようにしてください。