অবজেক্টের অ্যারে থেকে HTML টেবিল তৈরি

ধরুন আমাদের কাছে কিছু অবজেক্টের অ্যারে দেওয়া আছে, উদাহরণস্বরূপ, ব্যবহারকারীদের সাথে এমন একটি অ্যারে:

javascriptlet users = [
  {
    name: 'name1',
    surname: 'surname1',
    patronymic: 'patronymic1'
  },
  {
    name: 'name2',
    surname: 'surname2',
    patronymic: 'patronymic2'
  },
  {
    name: 'name3',
    surname: 'surname3',
    patronymic: 'patronymic3'
  },
];

আসুন এই অ্যারে থেকে একটি HTML টেবিল তৈরি করি, যার প্রতিটি সারিতে আমরা একটি পৃথক ব্যবহারকারীর ডেটা লিখব।

ডেটা সংরক্ষণের এই ধরনের কাঠামোতে সাধারণত অ্যারের উপর একটি লুপ চালানো হয় এবং প্রতিটি টেবিল সেল ম্যানুয়ালি তৈরি করা হয়, এভাবে:

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

javascriptlet table = document.getElementById('table');

for (let user of users) {
  let tr = document.createElement('tr');
  
  let td1 = document.createElement('td');
  td1.textContent = user.name;
  tr.appendChild(td1);
  
  let td2 = document.createElement('td');
  td2.textContent = user.surname;
  tr.appendChild(td2);
  
  let td3 = document.createElement('td');
  td3.textContent = user.patronymic;
  tr.appendChild(td3);
  
  table.appendChild(tr);
}

এই পদ্ধতিটি বেশি নমনীয়তা দেয় - আমরা নিজেরাই টেবিল সেল জুড়ে ডেটার ক্রম নিয়ন্ত্রণ করতে পারি (উদাহরণস্বরূপ, আমরা নাম এবং উপাধি অদলবদল করতে পারি)।

তদতিরিক্ত, ইচ্ছে করলে আমরা নির্দিষ্ট সেলগুলিতে ইভেন্ট যুক্ত করতে পারি। উদাহরণস্বরূপ, উপাধির সেলে ক্লিক করলে কিছু অ্যাকশন যুক্ত করা যায় ইত্যাদি।

javascriptlet employees = [
  {name: 'employee1', age: 30, salary: 400},
  {name: 'employee2', age: 31, salary: 500},
  {name: 'employee3', age: 32, salary: 600},
];