Penciptaan Jadual HTML daripada Array Objek

Katakan kita mempunyai array objek tertentu, contohnya, array pengguna seperti berikut:

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

Mari kita buat jadual HTML daripada array ini, di mana setiap baris kita akan catat data untuk setiap pengguna.

Dengan struktur penyimpanan data seperti ini, biasanya satu gelung dijalankan melalui array dan setiap sel jadual dicipta secara manual, seperti berikut:

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

Pendekatan ini memberikan fleksibiliti yang besar - kita boleh mengawal susunan data dalam sel jadual sendiri (kita boleh, sebagai contoh, menukar tempat nama dan nama keluarga).

Selain itu, jika mahu, kita boleh melekatkan peristiwa pada sel tertentu. Sebagai contoh, kita boleh melekatkan beberapa tindakan pada sel dengan nama keluarga untuk klik dan sebagainya.

Diberi array berikut dengan pekerja:

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

Paparkan elemen array ini dalam bentuk jadual HTML.

Ubah suai tugas sebelumnya supaya apabila klik pada mana-mana sel dengan umur, kandungannya bertambah sebanyak 1.

Ubah suai tugas sebelumnya supaya apabila klik pada mana-mana sel dengan gaji, kandungannya bertambah sebanyak 10%.