Membuat Tabel HTML dari Array Objek

Misalkan kita memiliki array objek tertentu, contohnya, array dengan pengguna seperti ini:

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

Mari kita buat tabel HTML dari array ini, di setiap barisnya kita akan mencatat data dari masing-masing pengguna.

Dengan struktur penyimpanan data seperti ini biasanya satu loop dijalankan melalui array dan setiap sel tabel dibuat secara manual, seperti ini:

<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 seperti ini memberikan fleksibilitas yang besar - kita bisa mengatur urutan penempatan data di sel tabel sendiri (kita bisa, misalnya, menukar nama depan dan nama belakang).

Selain itu, jika diinginkan kita dapat menambahkan event pada sel tertentu. Misalnya, sel dengan nama belakang dapat ditambahkan suatu tindakan saat diklik dan sebagainya.

Diberikan array berikut dengan karyawan:

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

Tampilkan elemen dari array ini dalam bentuk tabel HTML.

Modifikasi tugas sebelumnya sehingga saat mengklik sel mana pun yang berisi usia, isinya bertambah sebanyak 1.

Modifikasi tugas sebelumnya sehingga saat mengklik sel mana pun yang berisi gaji, isinya bertambah sebanyak 10%.