Tạo bảng HTML từ mảng đối tượng

Giả sử chúng ta có một mảng đối tượng nhất định, ví dụ, mảng người dùng như sau:

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

Hãy tạo một bảng HTML từ mảng này, trong mỗi hàng, chúng ta sẽ ghi dữ liệu của một người dùng riêng biệt.

Với cấu trúc lưu trữ dữ liệu như vậy, thông thường người ta chạy một vòng lặp qua mảng và tạo ra mỗi ô của bảng một cách thủ công, như thế này:

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

Cách tiếp cận này cho tính linh hoạt cao - chúng ta có thể tự điều chỉnh thứ tự sắp xếp dữ liệu theo các ô của bảng (chúng ta có thể, ví dụ, đổi chỗ tên và họ).

Ngoài ra, nếu muốn, chúng ta có thể gắn sự kiện vào các ô cụ thể. Ví dụ, có thể gắn một hành động nào đó vào ô chứa họ khi click và hơn thế nữa.

Cho mảng nhân viên sau:

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

Hiển thị các phần tử của mảng này dưới dạng bảng HTML.

Hãy sửa đổi bài toán trước đó sao cho khi click vào bất kỳ ô nào chứa tuổi, nội dung của nó sẽ tăng lên 1.

Hãy sửa đổi bài toán trước đó sao cho khi click vào bất kỳ ô nào chứa lương, nội dung của nó sẽ tăng lên 10%.