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);
}
Ушундай жакындоо чоң ийкемдүүлүк берет - биз таблицанын уячаларындагы маалыматтардын ордун өзүбүз жөндөй алабыз (мисалы, ат менен фамилиянын ордун алмаштыра алабыз).
Ошондой эле, каалоо боюнча биз белгилүү бир уячаларга окуяларды (events) илингизе алабыз. Мисалы, фамилия жазылган уячага чыкылдатууда кандайдыр бир амалды илингизсек болот жана башкалар.
Төмөнкү кызматкерлер массиви берилген:
let employees = [
{name: 'employee1', age: 30, salary: 400},
{name: 'employee2', age: 31, salary: 500},
{name: 'employee3', age: 32, salary: 600},
];
Бул массивдин элементтерин HTML таблицасы түрүндө чыгарыңыз.
Мурунку маселени ошондой өзгөртүңүз, жанаша
жаш жазылган каалаган уячага чыкылдатууда анын
мазмуну 1 көбөйсүн.
Мурунку маселени ошондой өзгөртүңүз, жанаша
эмгек акы жазылган каалаган уячага чыкылдатууда анын
мазмуну 10% көбөйсүн.