වස්තූන්ගේ අරාවකින් HTML වගුවක් නිර්මාණය කිරීම

අපට යම් වස්තූන්ගේ අරාවක් ඇතැයි උපකල්පනය කරමු, උදාහරණයක් ලෙස, පහත දැක්වෙන පරිශීලකයන්ගේ අරාව:

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

අපි මෙම අරාවෙන් HTML වගුවක් සාදමු, එහි එක් එක් පේළියකට වෙනම පරිශීලකයෙකුගේ දත්ත ලියන්නෙමු.

මෙවැනි දත්ත ගබඩා ව්යුහයක් සමඟ, සාමාන්යයෙන් අරාව හරහා එක් ලූපයක් ක්‍රියාත්මක කර සෑම වගු කොටුවක්ම අතින් නිර්මාණය කරයි, මෙලෙස:

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

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

මෙම ප්‍රවේශය විශාල නම්‍යශීලීත්වයක් ලබා දෙයි - අපට වගු කොටු තුළ දත්ත සැකසීමේ අනුපිළිවෙල සකස් කළ හැකිය (අපට, උදාහරණයක් ලෙස, නම සහ අන්වර්ථ නාමය හුවමාරු කළ හැකිය).

ඊට අමතරව, අවශ්‍ය නම් අපට ක්‍රියාවන් සිදු කිරීම සඳහා නිශ්චිත කොටු වලට අනුකෘති අමුණා ගත හැකිය. උදාහරණයක් ලෙස, අන්වර්ථ නාමය සහිත කොටුවට ක්ලික් කිරීමකින් යම් ක්‍රියාවක් අමුණා ගත හැකිය.

පහත දැක්වෙන සේවකයින්ගේ අරාව ලබා දී ඇත:

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

මෙම අරාවේ අංග HTML වගුවක ස්වරූපයෙන් පෙන්වන්න.

කලින් කාර්යය වෙනස් කරන්න එවිට වයස සමඟ ඕනෑම කොටුවක් මත ක්ලික් කිරීමෙන් එහි අන්තර්ගතය 1 කින් වැඩි කරයි.

කලින් කාර්යය වෙනස් කරන්න එවිට වැටුප සමඟ ඕනෑම කොටුවක් මත ක්ලික් කිරීමෙන් එහි අන්තර්ගතය 10% කින් වැඩි කරයි.