Array of Objects မှ HTML ဇယားဖန်တီးခြင်း

ကျွန်ုပ်တို့တွင် Object အချို့ပါဝင်သည့် Array တစ်ခုရှိသည်ဆိုပါစို့။ ဥပမာအားဖြင့်၊ ဤကဲ့သို့သော အသုံးပြုသူများ array ဖြစ်သည်။

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

ဤ array မှ HTML ဇယားတစ်ခုဖန်တီးကြပါစို့။ အဲဒီဇယားရဲ့ အတန်းတစ်ခုစီမှာ သီးခြားအသုံးပြုသူရဲ့ဒေတာတွေကို ရေးထည့်ပါမယ်။

ဒေတာသိုလှောင်မှုဖွဲ့စည်းပုံအရ၊ ၎င်းတို့သည် ယေဘူယျအားဖြင့် array ပေါ်တွင် loop တစ်ခုကို run ပြီး ဇယား၏ cell တစ်ခုစီကို လက်ဖြင့် ဤကဲ့သို့ဖန်တီးလေ့ရှိသည်။

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

ဤချဉ်းကပ်မှုသည် ပြောင်းလွယ်ပြင်လွယ်များစွာပေးသည် - ကျွန်ုပ်တို့သည် ဇယားရှိ cell များကို ဒေတာများစီစဉ်ခြင်း (ဥပမာ၊ နာမည်နှင့် မျိုးရိုးအမည်ကို လဲလှယ်နိုင်သည်) ကို ကိုယ်တိုင်ထိန်းညှိနိုင်သည်။

ထို့အပြင်၊ လိုလားပါက ကျွန်ုပ်တို့သည် အတိအကျသော cell များတွင် event များကို ချိတ်ဆက်နိုင်သည်။ ဥပမာအားဖြင့်၊ မျိုးရိုးအမည်ပါသော cell တစ်ခုပေါ်တွင် ကလစ်နှိပ်ခြင်းဖြင့် အခြားလုပ်ဆောင်ချက်များကို ချိတ်ဆက်နိုင်သည်။

အောက်ပါ အလုပ်သမားများနှင့် array ကို ပေးထားသည်။

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

ဤ array ၏ element များကို HTML ဇယားအဖြစ်ထုတ်ပြပါ။

ယခင်တာဝန်ကို ပြုပြင်မွမ်းမံပြီး အသက်အရွယ်ပါသော မည်သည့် cell ကိုမဆို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်း၏ပါဝင်မှုကို 1 တိုးပေးပါ။

ယခင်တာဝန်ကို ပြုပြင်မွမ်းမံပြီး လစာပါသော မည်သည့် cell ကိုမဆို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်း၏ပါဝင်မှုကို 10% တိုးပေးပါ။