Как отсортировать объект users по параметру “age” и вывести в виде таблицы используя только javascript и css?

107
14 марта 2021, 12:40
let users = [
    {"name":"Григорий", "surname":"Андреев", "age": 32},
    {"name":"Иван", "surname":"Иванов", "age": 23},
    {"name":"Александр", "surname":"Смирнов", "age": 27}
];
Answer 1

Можно таким образом:

document.addEventListener('DOMContentLoaded', function(){ 
        let users = [ 
            {"name":"Григорий", "surname":"Андреев", "age": 32}, 
            {"name":"Иван", "surname":"Иванов", "age": 23}, 
            {"name":"Александр", "surname":"Смирнов", "age": 27} 
        ]; 
        let table = document.getElementById('table'); 
         
        users.sort(compareAge); 
        users.forEach(function(item, i, arr){ 
            let tr = '<tr>' + '<td>'+item.name+'</td>' + '<td>'+item.surname+'</td>' + '<td>'+item.age+'</td>' +'</tr>'; 
            table.querySelector('tbody').insertAdjacentHTML('beforeend',tr); 
        }); 
    }); 
 
    function compareAge(personA, personB) { 
        return personA.age - personB.age; 
    }
<table id="table"> 
    <thead> 
        <tr> 
            <th>Имя</th> 
            <th>Фамилия</th> 
            <th>Возраст</th> 
        </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

Если нужно только JS, самое быстрое решение без создания узлов:

document.addEventListener('DOMContentLoaded', function(){ 
        document.body.insertAdjacentHTML('beforeend','<table id="table">\n' + 
            '    <thead>\n' + 
            '        <tr>\n' + 
            '            <th>Имя</th>\n' + 
            '            <th>Фамилия</th>\n' + 
            '            <th>Возраст</th>\n' + 
            '        </tr>\n' + 
            '    </thead>\n' + 
            '    <tbody>\n' + 
            '    </tbody>\n' + 
            '</table>'); 
 
        let users = [ 
            {"name":"Григорий", "surname":"Андреев", "age": 32}, 
            {"name":"Иван", "surname":"Иванов", "age": 23}, 
            {"name":"Александр", "surname":"Смирнов", "age": 27} 
        ]; 
        let table = document.getElementById('table'); 
         
        users.sort(compareAge); 
        users.forEach(function(item, i, arr){ 
            let tr = '<tr>' + '<td>'+item.name+'</td>' + '<td>'+item.surname+'</td>' + '<td>'+item.age+'</td>' +'</tr>'; 
            table.querySelector('tbody').insertAdjacentHTML('beforeend',tr); 
        }); 
    }); 
 
    function compareAge(personA, personB) { 
        return personA.age - personB.age; 
    }

READ ALSO
Как повернуть фигуру тетриса?

Как повернуть фигуру тетриса?

Есть фигура из тетриса (любая из 7), а в коде прописан массив из PointЭтот массив состоит из 4 элементов, так как в тетрисе каждая фигура — это...

108
Подключение к WCF сервису через прокси

Подключение к WCF сервису через прокси

Пытаюсь выполнить подключение к WCF сервису через проксиНа прокси настроена авторизация по логину-паролю

98
Создание сложного заголовка в C# WPF DataGrid

Создание сложного заголовка в C# WPF DataGrid

Необходимо создать таблицу, которая будет иметь следующую шапку, желательно использовать MVVM

101