Скрывать и показывать строки таблицы

@pixel · Регистрация: 19.05.2009

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

Формирую циклом строки таблицы. Количество строк равно количеству дней месяца. Но иногда на один день может быть несколько стрлк. Нужно показывать только по одной, но ставить ссылку по нажатию накоторую таблица должна раздвинуться и появиться скрытые строки. И обратная операция по скрытию строк. Подскажите, как сделать.

@Makc71 · 08.07.2013, 11:39

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        $(document).ready(function () {
            function addRow(i) {
                for (var j = 0; j <= i; j++) {
                    var x = $('<tr><td>1</td><td>2</td><td>3</td></tr>').appendTo($('table'));
                    if (j == 0) {
                        $(x).addClass('main');
                    }
                }
           };
           for (var i = 0; i < 3; i++) {
               addRow(i);
           }
           $('tr').hide();
           $('tr.main').show();
           $('tr.main').click(function () {
               $(this).nextUntil('tr.main').toggle();
           });
        });

@pixel · 08.07.2013, 11:45 **[ТС]**

я не могу пока проверить код, но по-моему это немного не то. тут добавляются строки, а мне нужно что бы они уже были добавлены, но не видны, а после клика по ссылка они показывались бы. т.е. php-файл генерит циклов код типа

HTML5
1
2
3
4
5
<tr><td>1</td><td>Some data</td></tr> 
<tr><td>2</td><td>Some data</td></tr>
<tr><td>&nbsp;</td><td>Some data</td></tr>
<tr><td>&nbsp;</td><td>Some data</td></tr>
<tr><td>3</td><td>Some data</td></tr>

при первом отображении должы быть видны только 3 строки, при клике на ссылке во второй строке должны появиться еще 2 скрытых строки, относящиеся непосредственно ко второй строке

@Makc71 · 08.07.2013, 12:04

JavaScript
1
2
3
4
5
6
7
8
9
        $(document).ready(function () {
           $('tr').hide();
            $('tr').filter(function () {
                return $(this).children('td').first().html() != '&nbsp;';
           }).addClass('main');
           $('tr.main').click(function () {
               $(this).nextUntil('tr.main').toggle();
           }).show();
        });

@pixel · 08.07.2013, 14:33 **[ТС]**

Вопрос. Данный код откроет все строки у которых есть пробел одновременно? Если да то как привязать скрытые стрлки к определенной строке со ссылкой?

@Makc71 · 08.07.2013, 15:14

pixel, принцип такой: щелкаете на строке, за которой следуют строки с пробелом. Строки с пробелом становятся видимыми вплоть до следующей строки с цифрой. Попробуйте потестить, должно нормально работать.
В принципе, якорные элементы можно и в ссылочки обернуть для наглядности

JavaScript
1
2
3
4
5
6
7
8
9
        $(document).ready(function () {
            $('tr').hide();
            $('tr').filter(function () {
                return $(this).children('td').first().html() != '&nbsp;';
            }).addClass('main').each(function () { $(this).children().last().wrapInner('<a href="#"></a>'); });
            $('tr.main').click(function () {
                $(this).nextUntil('tr.main').toggle();
            }).show();
        });

Добавлено через 24 минуты
ну что, разобрались?

@and_y87 · 09.07.2013, 16:15

pixel, Если бы показали пример таблицы (её код) было бы намного проще...

Добавлено через 16 минут
Недоглядел...
Увидил это

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

HTML5
1
2
3
4
5
<tr><td>1</td><td>Some data</td></tr> 
<tr><td>2</td><td>Some data</td></tr>
<tr><td>&nbsp;</td><td>Some data</td></tr>
<tr><td>&nbsp;</td><td>Some data</td></tr>
<tr><td>3</td><td>Some data</td></tr>

то бишь отталкичаться только от наличия пробелов (   ) ?

Добавлено через 12 минут
Как вариант:

добавить 2 типа атрибутов...
это много упростит задачу...

html

Кликните здесь для просмотра всего текста

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
<table class="rows_table">
    <tr data-main="a">
        <td>1</td>
        <td>Some data</td>
    </tr>
    <tr data-main="b">
        <td>2</td>
        <td>Some data</td>
    </tr>
    <tr data-child="b">
        <td>&nbsp;</td>
        <td>Some data</td>
    </tr>
    <tr data-child="b">
        <td>&nbsp;</td>
        <td>Some data</td>
    </tr>
    <tr data-main="c">
        <td>3</td>
        <td>Some data</td>
    </tr>
    <tr data-main="d">
        <td>4</td>
        <td>Some data</td>
    </tr>
    <tr data-child="d">
        <td>&nbsp;</td>
        <td>Some data</td>
    </tr>
    <tr data-child="d">
        <td>&nbsp;</td>
        <td>Some data</td>
    </tr>
</table>

JS

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function()
    {
        $("table.rows_table").find("[data-child]").hide();
    });
 
    $(document).on('click', '[data-child]', function() {
        var id = $(this).data('child') ;
        $('tr[data-child=' + id + ']').slideToggle();
    });
 
    $(document).on('click', '[data-main]', function() {
        $('tr[data-child=' + $(this).data('main') + ']').slideToggle();
    });

рабочий пример

@pixel · 09.07.2013, 16:58 **[ТС]**

только что вернулся. сейчас буду пробовать. кстати, сразу наводящий вопрос. подгружаю таблицу я аяксом, тогда как $(document).ready(function() срабатывает (как я понимаю) только при первой полной загрузке страницы (последующие вызовы на подмену данных в определенном div уже не будут вызывать данную функцию)

@and_y87 · 09.07.2013, 17:08

pixel, можно добавить в css правило:

CSS
1
tr[data-child] { display: none; );

оно избавит от такого рода проблем... да и тогда можно будет убрать эту часть кода:

JavaScript
1
2
3
$(document).ready(function() {
    $("table.rows_table").find("[data-child]").hide();
});

@pixel · 09.07.2013, 17:09 **[ТС]**

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

... data-main="a" ...

а это что? просто так писать без class или id?

@and_y87 · 09.07.2013, 17:14

pixel, a - это идентификатор группы строк...

@pixel · 13.07.2013, 17:56 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function()
    {
    $(document).on('click', '[data-child]', function() {
        var id = $(this).data('child') ;
        $('tr[data-child=' + id + ']').slideToggle();
    });
 
    $(document).on('click', '[data-main]', function() {
        $('tr[data-child=' + $(this).data('main') + ']').slideToggle();
    });

ну подскажите как мне переключение из этого кода повесить на ссылку? у меня вообще какая то хрень неработающая получается. Обрисую: в строку, у которой есть скрытые строки добавляю ссылку с текстом "Есть еще х событий ...". Открываться скрытые строки должны при клике на ссылку (а не на строку), после чего текст ссылки должен поменяться на "Скрыть" и при нажатии на эту ссылку дополнительные строки должны скрываться с заменой текста ссылки на первоначальный. Я даже не могу понять как поставить обработчик на <a href="#"> потому что если ссылка не одна и она где то внизу страницы, то при ее нажатии страница обновляется и переносится наверх.

@and_y87 · 15.07.2013, 12:11

pixel, надо просто вместо строки

HTML5
1
<tr data-main="a">

сделать внутри ссылку с этим же аттрибутом:

HTML5
1
<a href="#" data-main="a">показать</a>

@pixel · 15.07.2013, 20:13 **[ТС]**

попробую, но мне кажется не все так просто

Добавлено через 2 часа 44 минуты
Дело в том, что как я и писал выше, если ссылка находится внизу страницы (за гранью видимости), то при использовании <a href="#" страница перегружается и соответственно раскрытый список получается ниже видимости. Можно ли как то убрать действие перезапуска страницы?

Добавлено через 2 минуты
Опять же нужно как то перерабатывать обработчик скрытия строк на ту же ссылку, т.к. сейчас скрытие происходит при клике на строку. но получается что нужно подменять ссылке не только текст но и группу.

@and_y87 · 16.07.2013, 10:39

Там всего 10 строк, проанализируй код и поймёшь то что эта ссылка многофункциональная, их может быть много... она как много дистанционных пультов от телевизора...

поставь внутрь строк хоть на каждой :

HTML5
1
<a href="#" data-main="a">скрыть</a>

привязка действия идёт к data-main="a"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    $(document).ready(function() {
        $("table.rows_table").find("[data-child]").hide();
    });
 
    $(document).on('click', '[data-child]', function() {
        var id = $(this).data('child') ;
        $('tr[data-child=' + id + ']').slideToggle();
        return false;
    });
 
    $(document).on('click', '[data-main]', function() {
        $('tr[data-child=' + $(this).data('main') + ']').slideToggle();
        return false;
    });

Анализ кода

бинд функции на объект страницы содержащий аттрибут 'data-child' по действию 'click'
Скрипт: задать переменной id значение аттрибута 'data-child', значение атрибута объекта по которому был произведён клик
далее: выбрать элементы 'tr' с аттрибутом 'data-child' который будет равен id и выполнить на элементах .slideToggle()
.slideToggle() - функция которая скрывает/раскрывает элемент по переменно...

со второй всё похоже...

@pixel · 16.07.2013, 15:19 **[ТС]**

Да это все понятно. Но если там 300 строк и в трехсотойстроке есть подстроки то для того что бы добраться до этой стрлки надо скроллить страницу и после клика по ссылке придется заново скролить. Я что непонятно объясняю проюлему?

Добавлено через 4 часа 1 минуту
все что я пытался узнать разрешил посредством замены ссылки на вот это:

HTML5
1
<span class="linker" data-mine="1">Еще 4 события ...</span>

с такими атрибутами:

CSS
1
2
3
4
5
6
7
8
9
.linker {
color: #FFF;
}
 
.linker:hover { 
    text-decoration: underline; 
    color: #000;
    cursor: pointer;
   }

теперь строки где бы ни находились открываются без перезагрузки страницы.

@and_y87 · 16.07.2013, 15:32

pixel,

JavaScript
1
return false;

в конце кода отменяет перезагрузку страницы.... при условии что бинд был на ссылке... да и ваще много что отменит... отправку форму например... и прочее....

так же у него есть брат но более жестокий....

JavaScript
1
event.preventDefault;

@pixel · 16.07.2013, 15:34 **[ТС]**

не, координальные меры мне ни к чему. теперь другой вопрос, после клика на ссылке (спане) у меня подменяется текст на "Скрыть" - а при обратной операции как мне вернуть именно старое значение данного спана? оно же везде разное.

@and_y87 · 16.07.2013, 15:35

пример кода дай плиз... вставлю в клик тебе смену текста

@pixel · 16.07.2013, 15:43 **[ТС]**

JavaScript
1
2
3
4
$(document).on('click', '[data-mine]', function() {
        $('tr[data-child=' + $(this).data('mine') + ']').slideToggle();
        $('[data-mine='+$(this).data('mine') + ']').text("Скрыть");
    });

один то раз замена происходит, но наверное нужно как то в переменные кидать предыдущее значение и потом выискивать для обратной замены

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290

	Скрывать и показывать строки таблицы 08.07.2013, 10:27. Показов 15329. Ответов 25 Метки нет (Все метки) Формирую циклом строки таблицы. Количество строк равно количеству дней месяца. Но иногда на один день может быть несколько стрлк. Нужно показывать только по одной, но ставить ссылку по нажатию накоторую таблица должна раздвинуться и появиться скрытые строки. И обратная операция по скрытию строк. Подскажите, как сделать. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	08.07.2013, 14:33 [ТС]
	Вопрос. Данный код откроет все строки у которых есть пробел одновременно? Если да то как привязать скрытые стрлки к определенной строке со ссылкой? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	09.07.2013, 16:58 [ТС]
	только что вернулся. сейчас буду пробовать. кстати, сразу наводящий вопрос. подгружаю таблицу я аяксом, тогда как $(document).ready(function() срабатывает (как я понимаю) только при первой полной загрузке страницы (последующие вызовы на подмену данных в определенном div уже не будут вызывать данную функцию) 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	09.07.2013, 17:14
	pixel, a - это идентификатор группы строк... 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	15.07.2013, 20:13 [ТС]
	попробую, но мне кажется не все так просто Добавлено через 2 часа 44 минуты Дело в том, что как я и писал выше, если ссылка находится внизу страницы (за гранью видимости), то при использовании <a href="#" страница перегружается и соответственно раскрытый список получается ниже видимости. Можно ли как то убрать действие перезапуска страницы? Добавлено через 2 минуты Опять же нужно как то перерабатывать обработчик скрытия строк на ту же ссылку, т.к. сейчас скрытие происходит при клике на строку. но получается что нужно подменять ссылке не только текст но и группу. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	16.07.2013, 15:34 [ТС]
	не, координальные меры мне ни к чему. теперь другой вопрос, после клика на ссылке (спане) у меня подменяется текст на "Скрыть" - а при обратной операции как мне вернуть именно старое значение данного спана? оно же везде разное. 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	16.07.2013, 15:35
	пример кода дай плиз... вставлю в клик тебе смену текста 0