การสร้างตาราง 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);
}

วิธีการนี้ให้ความยืดหยุ่นสูง - เราสามารถ ควบคุมลำดับการจัดวางข้อมูล ในเซลล์ตารางได้ด้วยตัวเอง (เราสามารถ สลับที่กัน ระหว่างชื่อและนามสกุลได้)

นอกจากนี้ หากต้องการ เราสามารถติดตั้ง อีเวนต์บนเซลล์เฉพาะบางเซลล์ได้ ตัวอย่างเช่น สามารถติดตั้งการกระทำบางอย่างเมื่อคลิกบนเซลล์ที่มีนามสกุล เป็นต้น

กำหนดอาร์เรย์ของพนักงานดังต่อไปนี้:

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

แสดงองค์ประกอบของอาร์เรย์นี้ในรูปแบบ ตาราง HTML

ปรับเปลี่ยนโจทย์ก่อนหน้าเพื่อให้ เมื่อคลิกที่เซลล์ใดก็ตามที่มีอายุ เนื้อหาในเซลล์นั้น เพิ่มขึ้น 1

ปรับเปลี่ยนโจทย์ก่อนหน้าเพื่อให้ เมื่อคลิกที่เซลล์ใดก็ตามที่มีเงินเดือน เนื้อหาในเซลล์นั้น เพิ่มขึ้น 10%