Задание. Таблица.
Credit: https://learn.javascript.ru/multi-insert
by Artem
CSS
table {
border-collapse: collapse;
}
th {
padding: 10px 15px;
border-bottom: 2px solid #ccc;
}
td {
padding: 10px 15px;
border-bottom: 1px solid #ccc;
}
JavaScript
'use strict';
class User {
constructor(name, surname, patronymic, age) {
this.name = name;
this.surname = surname;
this.patronymic = patronymic;
this.age = age;
}
[Symbol.iterator]() {
let keys = Object.keys(this);
let that = this;
return {
next() {
if (keys.length) {
return {
value: that[keys.shift()],
done: false
}
} else {
return {
done: true
}
}
}
};
}
}
const vasya = new User('Вася', 'Петров', 'Александрович', 10);
const petya = new User('Петя', 'Иванов', 'Петрович', 15);
const vladimir = new User('Владимир', 'Ленин', 'Ильич', 9);
let users = [vasya, petya, vladimir];
function sortArray(field, array) {
let tmpUsers = users.slice();
tmpUsers.sort((a, b) => {
return a[field] - b[field];
});
return tmpUsers;
}
let sortedUsers = sortArray('age', users);
const table = document.createElement('table');
const tHead = table.createTHead();
let th = document.createElement('th');
tHead.appendChild(th.cloneNode()).textContent = 'Имя';
tHead.appendChild(th.cloneNode()).textContent = 'Фамилия';
tHead.appendChild(th.cloneNode()).textContent = 'Отчество';
tHead.appendChild(th.cloneNode()).textContent = 'Возраст';
sortedUsers.forEach((user, index) => {
const row = table.insertRow(index);
for (let value of user) {
const cell = document.createElement('td');
cell.textContent = value;
row.appendChild(cell);
}
});
document.body.appendChild(table);