HTML টেবিলগুলি ক্রমান্বয়ে পূরণ করা

ধরুন আমাদের কাছে এইরকম একটি খালি HTML টেবিল আছে:

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

আসুন এই টেবিলটি সেল দিয়ে পূরণ করি এবং এটি এমনভাবে করি যাতে এই সেলগুলিতে 1 থেকে 9 পর্যন্ত সংখ্যাগুলি থাকে। আমরা যা পেতে চাই তার উদাহরণ এখানে:

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

আসুন বাস্তবায়নে এগিয়ে যাই।

শুরুতে, আসুন শুধু 3 বাই 3 আকারের একটি টেবিল তৈরি করি, যা 'x' অক্ষর দিয়ে পূর্ণ:

let table = document.querySelector('#table');

for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		td.textContent = 'x';
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

আসুন এখন এটি এমনভাবে পরিবর্তন করি যাতে 'x' অক্ষরের পরিবর্তে, সংখ্যাগুলি ক্রমবর্ধমানভাবে সেলগুলিতে লেখা হয়।

এটি করার জন্য, আমাদের আরও একটি কাউন্টার প্রবর্তন করা প্রয়োজন, যা অভ্যন্তরীণ লুপের প্রতিটি পুনরাবৃত্তিতে ক্রমান্বয়ে এর মান বৃদ্ধি করবে, এভাবে:

let table = document.querySelector('#table');

let k = 1; // কাউন্টারের প্রারম্ভিক মান
for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		
		td.textContent = k; // কাউন্টারটি সেলে লিখুন
		k++; // কাউন্টার বৃদ্ধি করুন
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

5 সারি বাই 5 কলাম আকারের একটি HTML টেবিল প্রদর্শন করুন, যাতে এর সেলগুলিতে 1 থেকে 25 পর্যন্ত সংখ্যাগুলি ক্রমান্বয়ে থাকে।

পূর্ববর্তী কাজটি পরিবর্তন করুন যাতে টেবিলের সেলগুলিতে 2 থেকে 50 পর্যন্ত ব্যবধানের জোড় সংখ্যাগুলি লেখা থাকে।