ऑब्जेक्ट्स की array से HTML टेबल बनाना

मान लीजिए कि हमारे पास ऑब्जेक्ट्स की एक array है, उदाहरण के लिए, users के साथ इस प्रकार की array:

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

आइए इस array से एक HTML टेबल बनाएं, जिसकी प्रत्येक पंक्ति में एक अलग user का डेटा लिखा होगा।

डेटा संग्रहीत करने की ऐसी संरचना के साथ, आमतौर पर array पर एक लूप चलाया जाता है और टेबल की प्रत्येक सेल को मैन्युअल रूप से इस तरह बनाया जाता है:

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

यह दृष्टिकोण बड़ी लचीलापन देता है - हम टेबल की सेल में डेटा के क्रम को स्वयं नियंत्रित कर सकते हैं (उदाहरण के लिए, हम नाम और उपनाम की अदला-बदली कर सकते हैं)।

इसके अलावा, यदि हम चाहें तो कुछ विशेष सेल पर इवेंट लगा सकते हैं। उदाहरण के लिए, उपनाम वाली सेल पर क्लिक करने पर कोई क्रिया आदि लगाई जा सकती है।

कर्मचारियों के साथ निम्नलिखित array दी गई है:

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

इस array के एलिमेंट्स को HTML टेबल के रूप में प्रदर्शित करें।

पिछली समस्या को इस प्रकार संशोधित करें कि उम्र वाली किसी भी सेल पर क्लिक करने पर उसकी सामग्री 1 से बढ़ जाए।

पिछली समस्या को इस प्रकार संशोधित करें कि वेतन वाली किसी भी सेल पर क्लिक करने पर उसकी सामग्री 10% से बढ़ जाए।