Таблица с выезжающими строками

@Frolien · Регистрация: 29.02.2016

Студворк — интернет-сервис помощи студентам

Всем привет. Вот код простенькой таблицы:

HTML5
1
2
3
4
5
6
7
8
9
<table class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>Строка:1 Столбец:1</td><td>Строка:1 Столбец:2</td><td>Строка:1 Столбец:3</td><td>Строка:1 Столбец:4</td><td>Строка:1 Столбец:5</td></tr>
<tr><td>Строка:2 Столбец:1</td><td>Строка:2 Столбец:2</td><td>Строка:2 Столбец:3</td><td>Строка:2 Столбец:4</td><td>Строка:2 Столбец:5</td></tr>
<tr><td>Строка:3 Столбец:1</td><td>Строка:3 Столбец:2</td><td>Строка:3 Столбец:3</td><td>Строка:3 Столбец:4</td><td>Строка:3 Столбец:5</td></tr>
<tr><td>Строка:4 Столбец:1</td><td>Строка:4 Столбец:2</td><td>Строка:4 Столбец:3</td><td>Строка:4 Столбец:4</td><td>Строка:4 Столбец:5</td></tr>
<tr><td>Строка:5 Столбец:1</td><td>Строка:5 Столбец:2</td><td>Строка:5 Столбец:3</td><td>Строка:5 Столбец:4</td><td>Строка:5 Столбец:5</td></tr>
<tr><td>Строка:6 Столбец:1</td><td>Строка:6 Столбец:2</td><td>Строка:6 Столбец:3</td><td>Строка:6 Столбец:4</td><td>Строка:6 Столбец:5</td></tr>
</table>

Как сделать так, чтобы была видна только первая и последняя строки таблицы, но если кликнуть на первую, то появятся 2, 3, 4 и 5, а если нажать ещё раз, то они опять пропадут.

@mrtoxas · 08.05.2017, 17:03

При помощи javascript. Что вам ближе - нативный js или jquery?

@Frolien · 08.05.2017, 17:08 **[ТС]**

Особо разницы не имеет. Можете скинуть пример?

@Lazy_Den · 08.05.2017, 18:04

Frolien, https://jsfiddle.net/zr1hsaq0/

CSS
1
2
3
.tftable tr:not(:first-child):not(:last-child) {
    display: none;
}

JavaScript
1
2
3
4
var tr = $('.tftable tr');
tr.eq(0).on('click', function(){
    tr.show();
});

@Frolien · 08.05.2017, 18:29 **[ТС]**

Сообщение от Lazy_Den

Frolien, https://jsfiddle.net/zr1hsaq0/

CSS
1
2
3
.tftable tr:not(:first-child):not(:last-child) {
    display: none;
}

JavaScript
1
2
3
4
var tr = $('.tftable tr');
tr.eq(0).on('click', function(){
    tr.show();
});

Разворачивается только при клике на шапку таблицы, не сворачивается при повторном клике. Немного не то что я просил.

@Lazy_Den · 08.05.2017, 19:08

Сообщение от Frolien

не сворачивается при повторном клике

Замените метод .show() на .toggle(). Только исключите строки, которые должны быть всегда видны.

Сообщение от Frolien

Разворачивается только при клике на шапку

У вас нет "шапки". Лично я в коде не вижу элемента <thead>. Впрочем, измените селектор строки на тот, который считаете нужным и все.

Добавлено через 37 секунд
https://jsfiddle.net/zr1hsaq0/2/

@Frolien · 08.05.2017, 19:10 **[ТС]**

Сообщение от Lazy_Den

Замените метод .show() на .toggle(). Только исключите строки, которые должны быть всегда видны.
У вас нет "шапки". Лично я в коде не вижу элемента <thead>. Впрочем, измените селектор строки на тот, который считаете нужным и все.

Добавлено через 37 секунд
https://jsfiddle.net/zr1hsaq0/2/

Походу я что-то не так делаю... На jsfiddle работает а когда у себя пишу нет. Можешь глянуть что я не так делаю?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  .tftable tr:not(:first-child):not(:last-child) {
    display: none;
}
  </style>
 </head>
 <body>
<script type="text/javascript">
var tr = $('.tftable tr');
tr.eq(0).on('click', function(){
    tr.show();
});
</script> 
<table class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>Строка:1 Столбец:1</td><td>Строка:1 Столбец:2</td><td>Строка:1 Столбец:3</td><td>Строка:1 Столбец:4</td><td>Строка:1 Столбец:5</td></tr>
<tr><td>Строка:2 Столбец:1</td><td>Строка:2 Столбец:2</td><td>Строка:2 Столбец:3</td><td>Строка:2 Столбец:4</td><td>Строка:2 Столбец:5</td></tr>
<tr><td>Строка:3 Столбец:1</td><td>Строка:3 Столбец:2</td><td>Строка:3 Столбец:3</td><td>Строка:3 Столбец:4</td><td>Строка:3 Столбец:5</td></tr>
<tr><td>Строка:4 Столбец:1</td><td>Строка:4 Столбец:2</td><td>Строка:4 Столбец:3</td><td>Строка:4 Столбец:4</td><td>Строка:4 Столбец:5</td></tr>
<tr><td>Строка:5 Столбец:1</td><td>Строка:5 Столбец:2</td><td>Строка:5 Столбец:3</td><td>Строка:5 Столбец:4</td><td>Строка:5 Столбец:5</td></tr>
<tr><td>Строка:6 Столбец:1</td><td>Строка:6 Столбец:2</td><td>Строка:6 Столбец:3</td><td>Строка:6 Столбец:4</td><td>Строка:6 Столбец:5</td></tr>
</table>
 </body>
 </html>

И ещё вопрос: исключать строки которые должны быть видны в стилях? если да то есть проблема я не знаю сколько в таблице будет строк, но к каждой должно быть дополнение. Как это учесть?
Может лучше сделать функцию, которая будет прятать определённые строки и показывать их при клике на основную? Ток я хз как это делать))

@Lazy_Den · 08.05.2017, 19:41

Frolien, у вас не подключена библиотека jQuery. И откорректированный пример я дополнил в предыдущем ответе.

Добавлено через 2 минуты
Кроме того, JS-код нужно или располагать в конце страницы, или отслеживать загрузку DOM. В оQuery для этого есть такой метод:

JavaScript
1
2
3
4
5
$(function(){
 
   // тут остальной код
 
});

Добавлено через 10 минут
Короче, вот полный рабочий код.

Всё вместе

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.tftable tr:not(:first-child):not(:last-child) {
    display: none;
}
</style>
<script>
$(function() {
  var tr = $('.tftable tbody tr');
  tr.eq(0).on('click', function() {
    tr.not(':first-child, :last-child').toggle();
  });
});
</script>
</head>
<body>
<table class="tftable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Строка:1 Столбец:1</td>
      <td>Строка:1 Столбец:2</td>
      <td>Строка:1 Столбец:3</td>
      <td>Строка:1 Столбец:4</td>
      <td>Строка:1 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:2 Столбец:1</td>
      <td>Строка:2 Столбец:2</td>
      <td>Строка:2 Столбец:3</td>
      <td>Строка:2 Столбец:4</td>
      <td>Строка:2 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:3 Столбец:1</td>
      <td>Строка:3 Столбец:2</td>
      <td>Строка:3 Столбец:3</td>
      <td>Строка:3 Столбец:4</td>
      <td>Строка:3 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:4 Столбец:1</td>
      <td>Строка:4 Столбец:2</td>
      <td>Строка:4 Столбец:3</td>
      <td>Строка:4 Столбец:4</td>
      <td>Строка:4 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:5 Столбец:1</td>
      <td>Строка:5 Столбец:2</td>
      <td>Строка:5 Столбец:3</td>
      <td>Строка:5 Столбец:4</td>
      <td>Строка:5 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:6 Столбец:1</td>
      <td>Строка:6 Столбец:2</td>
      <td>Строка:6 Столбец:3</td>
      <td>Строка:6 Столбец:4</td>
      <td>Строка:6 Столбец:5</td>
    </tr>
  </tbody>
</table>
</body>
</html>

@Frolien · 08.05.2017, 20:58 **[ТС]**

Сообщение от Lazy_Den

Frolien, у вас не подключена библиотека jQuery. И откорректированный пример я дополнил в предыдущем ответе.

Добавлено через 2 минуты
Кроме того, JS-код нужно или располагать в конце страницы, или отслеживать загрузку DOM. В оQuery для этого есть такой метод:

JavaScript
1
2
3
4
5
$(function(){
 
   // тут остальной код
 
});

Добавлено через 10 минут
Короче, вот полный рабочий код.

Всё вместе

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.tftable tr:not(:first-child):not(:last-child) {
    display: none;
}
</style>
<script>
$(function() {
  var tr = $('.tftable tbody tr');
  tr.eq(0).on('click', function() {
    tr.not(':first-child, :last-child').toggle();
  });
});
</script>
</head>
<body>
<table class="tftable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Строка:1 Столбец:1</td>
      <td>Строка:1 Столбец:2</td>
      <td>Строка:1 Столбец:3</td>
      <td>Строка:1 Столбец:4</td>
      <td>Строка:1 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:2 Столбец:1</td>
      <td>Строка:2 Столбец:2</td>
      <td>Строка:2 Столбец:3</td>
      <td>Строка:2 Столбец:4</td>
      <td>Строка:2 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:3 Столбец:1</td>
      <td>Строка:3 Столбец:2</td>
      <td>Строка:3 Столбец:3</td>
      <td>Строка:3 Столбец:4</td>
      <td>Строка:3 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:4 Столбец:1</td>
      <td>Строка:4 Столбец:2</td>
      <td>Строка:4 Столбец:3</td>
      <td>Строка:4 Столбец:4</td>
      <td>Строка:4 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:5 Столбец:1</td>
      <td>Строка:5 Столбец:2</td>
      <td>Строка:5 Столбец:3</td>
      <td>Строка:5 Столбец:4</td>
      <td>Строка:5 Столбец:5</td>
    </tr>
    <tr>
      <td>Строка:6 Столбец:1</td>
      <td>Строка:6 Столбец:2</td>
      <td>Строка:6 Столбец:3</td>
      <td>Строка:6 Столбец:4</td>
      <td>Строка:6 Столбец:5</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Спасибо, работает. Но есть одна проблема, я её описывал выше. В моей таблице всегда будет разное количество строк. (я не знаю сколько точно). Как присвоить строке что-то типо класса или идентификатора, чтобы строки с ним автоматически исключались?

Добавлено через 32 минуты
И как сделать ещё 1 дополнение (строки которые появляются при клике на 1-5ую строки)

Добавлено через 39 минут
Нашёл такой код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
 <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title></title>
  <style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
 </head>
 <body>
<table id="report">
        <tr>
            <th>Country</th>
            <th>Population</th>
            <th>Area</th>
            <th>Official languages</th>
            <th></th>
        </tr>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
                    <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
                    <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
                 </ul>   
            </td>
        </tr>
</table>
<script type="text/javascript">  
$(function(){
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
});
    </script>
 </body>
 </html>

Только вот как добавить ещё 1 строку, которая будет выводится при нажатии на "Additional information"?

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.05.2017, 17:03
	При помощи javascript. Что вам ближе - нативный js или jquery? 0

@Frolien 0 / 0 / 0 Регистрация: 29.02.2016 Сообщений: 44
	08.05.2017, 17:08 [ТС]
	Особо разницы не имеет. Можете скинуть пример? 0