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

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

সারি যোগ করা

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

javascriptlet 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);

কলাম যোগ করা

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

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

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

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

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