객체 배열에서 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);
}

이런 접근 방식은 큰 유연성을 제공합니다. 테이블 셀에 데이터를 배치하는 순서를 직접 조정할 수 있습니다(예를 들어, 이름과 성의 위치를 바꿀 수 있습니다).

또한 원한다면 특정 셀에 이벤트를 추가할 수 있습니다. 예를 들어, 성(last name)이 있는 셀을 클릭했을 때 어떤 동작을 하게 하는 등입니다.

다음은 직원 배열입니다:

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

이 배열의 요소를 HTML 테이블 형태로 출력하세요.

이전 문제를 수정하여 나이가 적힌 어떤 셀을 클릭해도 해당 셀의 내용이 1만큼 증가하도록 하세요.

이전 문제를 수정하여 급여가 적힌 어떤 셀을 클릭해도 해당 셀의 내용이 10%만큼 증가하도록 하세요.