Страницы

Поиск по вопросам

понедельник, 10 февраля 2020 г.

Как показывать только 3 строки по умолчанию, а всю таблицу только при нажатии кнопки “показать всю”

#javascript #html #css


Есть рейтинг на сайте

    
Фамилия Имя Очки
1 Мацюк Александр 280
2 Мурзин Максим 135
3 Тюков Владимир 85
4 Гаврилов Константин 80
5 Кутя Сергей 80
6 Кислань Елизавета 72
7 Моисеенко Александр 61
8 Краснов Денис 60
9 Кислань Сергей 59
10 Кулага Илья 59
Как сделать, что бы показывало на странице только ТОП3 и при нажатии на кнопку(ее пока нет) "показать весь рейтинг" открывало весь рейтинг.


Ответы

Ответ 1



Например вот так: var button = document.getElementById('showAll'); table = document.getElementById('myTable'); button.addEventListener('click', function() { // Проверяем на наличие класса и вызываем соответсвуюущую функцию table.classList.contains('opened') ? hideRows() : showRows(); }); function showRows() { table.classList.add('opened'); button.innerHTML = 'Скрыть'; } function hideRows() { table.classList.remove('opened'); button.innerHTML = 'Показать всё'; } .tablesorter tbody tr { display: none; } .tablesorter.opened tbody tr { display: table-row; } .tablesorter tbody tr:nth-child(1), .tablesorter tbody tr:nth-child(2), .tablesorter tbody tr:nth-child(3) { display: table-row; }
Фамилия Имя Очки
1 Мацюк Александр 280
2 Мурзин Максим 135
3 Тюков Владимир 85
4 Гаврилов Константин 80
5 Кутя Сергей 80
6 Кислань Елизавета 72
7 Моисеенко Александр 61
8 Краснов Денис 60
9 Кислань Сергей 59
10 Кулага Илья 59


Комментариев нет:

Отправить комментарий