Nesne Dizisinden HTML Tablosu Oluşturma

Bize belirli bir nesne dizisi verildiğini varsayalım, örneğin, kullanıcılarla ilgili şu dizi:

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

Bu diziden bir HTML tablosu yapalım, her satıra ayrı bir kullanıcının verilerini yazalım.

Bu tür veri saklama yapısında genellikle dizi üzerinde bir döngü başlatılır ve her tablo hücresi manuel olarak şu şekilde oluşturulur:

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

Bu yaklaşım büyük esneklik sağlar - verilerin tablo hücreleri içindeki sırasını kendimiz ayarlayabiliriz (örneğin, ad ve soyadı yer değiştirebiliriz).

Ayrıca, istersek belirli hücrelere olaylar ekleyebiliriz. Örneğin, soyadı yazan hücreye tıklama ile bir işlem ekleyebiliriz ve benzeri.

Aşağıdaki çalışanlar dizisi verilmiştir:

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

Bu dizinin elemanlarını HTML tablosu şeklinde görüntüleyin.

Önceki görevi, yaş yazan herhangi bir hücreye tıklandığında içeriğinin 1 artması için değiştirin.

Önceki görevi, maaş yazan herhangi bir hücreye tıklandığında içeriğinin %10 artması için değiştirin.