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

@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"?

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@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