অবজেক্টের অ্যারে থেকে 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% দ্বারা বৃদ্ধি পায়।