JavaScript-এ অ্যারে থেকে HTML টেবিল তৈরি করা

ধরা যাক আমাদের একটি খালি টেবিল আছে:

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

ধরা যাক আমাদের একটি দ্বি-মাত্রিক অ্যারে দেওয়া আছে, উদাহরণস্বরূপ, এইরকম:

javascriptlet arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

এই অ্যারের ভিত্তিতে আসুন একটি HTML টেবিল তৈরি করি, যেটি এই অ্যারের উপাদানগুলি দিয়ে পূর্ণ হবে। অর্থাৎ, আমাদের কাছে তিনটি সারি সহ একটি টেবিল হবে, প্রতিটিতে 4টি সেল থাকবে।

দুটি নেস্টেড for-of লুপ ব্যবহার করে সমস্যাটির সমাধান করি:

javascriptlet arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
  let tr = document.createElement('tr');
  
  for (let elem of subArr) {
    let td = document.createElement('td');
    td.textContent = elem;
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}

আপনি দেখতে পাচ্ছেন, আমাদের সমাধানটি সর্বজনীন হয়ে উঠেছে এবং সাব-অ্যারের সংখ্যা এবং প্রতিটি সাব-অ্যারে উপাদানের সংখ্যা থেকে স্বাধীন। একমাত্র শর্ত হল সাব-অ্যারেগুলিতে সমান সংখ্যক উপাদান থাকা।

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];