වස්තූන්ගේ අරාවකින් 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},
];