Как показывать только 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