JavaScript-এ অ্যারে থেকে HTML টেবিল তৈরি করা

ধরা যাক আমাদের একটি খালি টেবিল আছে:

<table id="table"></table>

ধরা যাক আমাদের একটি দ্বি-মাত্রিক অ্যারে দেওয়া আছে, উদাহরণস্বরূপ, এইরকম:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

এই অ্যারের ভিত্তিতে আসুন একটি HTML টেবিল তৈরি করি, যেটি এই অ্যারের উপাদানগুলি দিয়ে পূর্ণ হবে। অর্থাৎ, আমাদের কাছে তিনটি সারি সহ একটি টেবিল হবে, প্রতিটিতে 4টি সেল থাকবে।

দুটি নেস্টেড for-of লুপ ব্যবহার করে সমস্যাটির সমাধান করি:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
	let tr = document.createElement('tr');
	
	for (let elem of subArr) {
		let td = document.createElement('td');
		td.textContent = elem;
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

আপনি দেখতে পাচ্ছেন, আমাদের সমাধানটি সর্বজনীন হয়ে উঠেছে এবং সাব-অ্যারের সংখ্যা এবং প্রতিটি সাব-অ্যারে উপাদানের সংখ্যা থেকে স্বাধীন। একমাত্র শর্ত হল সাব-অ্যারেগুলিতে সমান সংখ্যক উপাদান থাকা।

একটি অ্যারে দেওয়া আছে:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];

পাঠের তাত্ত্বিক অংশ না দেখে, প্রদত্ত অ্যারের উপাদানগুলি একটি HTML টেবিল table আকারে প্রদর্শন করুন।

পূর্ববর্তী সমস্যাটি পরিবর্তন করুন যাতে টেবিলে উপাদানগুলি নয়, বরং এই উপাদানগুলির বর্গ লিপিবদ্ধ হয়।