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

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

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

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

html<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' অক্ষর দিয়ে পূর্ণ:

javascriptlet 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' অক্ষরের পরিবর্তে, সংখ্যাগুলি ক্রমবর্ধমানভাবে সেলগুলিতে লেখা হয়।

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

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