HTML টেবিলে সারি এবং কলাম যোগ করা

ধরা যাক আমাদের একটি HTML টেবিল #table আছে। আসুন শিখি কিভাবে এতে নতুন সারি এবং কলাম যোগ করতে হয়।

সারি যোগ করা

সারি যোগ করা কঠিন নয়: আপনাকে একটি tr তৈরি করতে হবে, এবং তারপর একটি লুপ চালাতে হবে যা সেই সারিতে প্রয়োজনীয় সংখ্যক সেল যোগ করবে (ধরা যাক 3):

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

let tr = document.createElement('tr');

for (let i = 1; i <= 3; i++) {
	let td = document.createElement('td');
	tr.appendChild(td);
}

table.appendChild(tr);

একটি বাটন তৈরি করুন, যেটি ক্লিক করলে টেবিলে একটি নতুন সারি যোগ হবে।

কলাম যোগ করা

কিন্তু কলাম যোগ করা কিছুটা জটিল: আপনাকে একটি লুপ চালাতে হবে যা টেবিলের সমস্ত সারিを通ে ঘুরবে এবং প্রতিটি সারিতে একটি নতুন সেল যোগ করবে:

let trs = document.querySelectorAll('#table tr');

for (let tr of trs) {
	let td = document.createElement('td');
	tr.appendChild(td);
}

একটি 2 বাই 2 আকারের টেবিল দেওয়া আছে:

<table id="table">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

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

একটি বাটনও দেওয়া আছে। এমনভাবে তৈরি করুন যাতে বাটনে ক্লিক করলে টেবিলের আকার এক সারি এবং এক কলাম করে বড় হয়।