JavaScript-এ HTML টেবিল তৈরি করার ফাংশন

এখন আসুন আমরা একটি ফাংশন createTable তৈরি করি, যেটি একটি নির্দিষ্ট আকারের টেবিল তৈরি করবে এবং এটিকে একটি নির্দিষ্ট এলিমেন্টের শেষে যোগ করবে।

আমাদের ফাংশনটি প্রথম প্যারামিটার হিসাবে সারির সংখ্যা, দ্বিতীয় প্যারামিটার হিসাবে কলামের সংখ্যা, এবং তৃতীয় প্যারামিটার হিসাবে DOM এলিমেন্টের রেফারেন্স নেবে, যার ভিতরে আমাদের টেবিল তৈরি করা হবে।

আসুন দেখি কিভাবে আমরা বর্ণিত ফাংশনটি ব্যবহার করব, যখন এটি তৈরি হয়ে যাবে। ধরুন, উদাহরণস্বরূপ, আমাদের নিম্নলিখিত ডিভটি দেওয়া আছে:

<div id="elem"></div>

আসুন এই ডিভের ভিতরে একটি 3 বাই 4 টেবিল তৈরি করি:

let div = document.querySelector('#elem');
createTable(3, 4, div);

এখন ধরুন আমাদের দুটি ডিভ দেওয়া আছে:

<div id="elem1"></div>
<div id="elem2"></div>

আসুন এই প্রতিটি ডিভে আমাদের নিজস্ব টেবিল তৈরি করি:

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

তৈরি করা টেবিলগুলি অবিলম্বে দৃশ্যমান করার জন্য, কিছু CSS যোগ করা যেতে পারে, উদাহরণস্বরূপ, এইরকম:

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

বর্ণিত ফাংশনের জন্য এখানে একটি খসড়া:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// এখানে rows সারি এবং cols কলাম সহ একটি টেবিল তৈরি করব
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

উপরের ফাংশন খসড়ার কোডটি সম্পূর্ণ করুন। সমাপ্ত ফাংশনের কার্যকারিতা পরীক্ষা করুন।