Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.89/74: Рейтинг темы: голосов - 74, средняя оценка - 4.89
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
1

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

08.07.2013, 10:27. Показов 14501. Ответов 25
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Формирую циклом строки таблицы. Количество строк равно количеству дней месяца. Но иногда на один день может быть несколько стрлк. Нужно показывать только по одной, но ставить ссылку по нажатию накоторую таблица должна раздвинуться и появиться скрытые строки. И обратная операция по скрытию строк. Подскажите, как сделать.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.07.2013, 10:27
Ответы с готовыми решениями:

Правильно показывать и скрывать содержимое
Всем здрасте, подскажите как правильно скрывать и показывать содержимое блока. <article...

Показывать и скрывать элемент при нажатии
поскольку toggle() больше нет в jq, приходится писать что-то такое: var s=0; ...

Показывать/скрывать элементы для touch устройств
Здравствуйте уважаемые форумчане. У меня к вам такой вопрос. Делаю на сайте опцию просмотра...

При нажатии на кнопку показывать\скрывать парные объекты
Подскажите, что я делаю не так (может есть упрощенный вариант), ато писал на сколько хватает...

25
54 / 52 / 10
Регистрация: 28.09.2012
Сообщений: 97
08.07.2013, 11:39 2
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();
           });
        });
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
08.07.2013, 11:45  [ТС] 3
я не могу пока проверить код, но по-моему это немного не то. тут добавляются строки, а мне нужно что бы они уже были добавлены, но не видны, а после клика по ссылка они показывались бы. т.е. 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 скрытых строки, относящиеся непосредственно ко второй строке
0
54 / 52 / 10
Регистрация: 28.09.2012
Сообщений: 97
08.07.2013, 12:04 4
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();
        });
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
08.07.2013, 14:33  [ТС] 5
Вопрос. Данный код откроет все строки у которых есть пробел одновременно? Если да то как привязать скрытые стрлки к определенной строке со ссылкой?
0
54 / 52 / 10
Регистрация: 28.09.2012
Сообщений: 97
08.07.2013, 15:14 6
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 минуты
ну что, разобрались?
1
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
09.07.2013, 16:15 7
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>
то бишь отталкичаться только от наличия пробелов ( &nbsp; ) ?

Добавлено через 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();
    });


рабочий пример
1
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
09.07.2013, 16:58  [ТС] 8
только что вернулся. сейчас буду пробовать. кстати, сразу наводящий вопрос. подгружаю таблицу я аяксом, тогда как $(document).ready(function() срабатывает (как я понимаю) только при первой полной загрузке страницы (последующие вызовы на подмену данных в определенном div уже не будут вызывать данную функцию)
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
09.07.2013, 17:08 9
pixel, можно добавить в css правило:
CSS
1
tr[data-child] { display: none; );
оно избавит от такого рода проблем... да и тогда можно будет убрать эту часть кода:
Javascript
1
2
3
$(document).ready(function() {
    $("table.rows_table").find("[data-child]").hide();
});
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
09.07.2013, 17:09  [ТС] 10
Цитата Сообщение от and_y87 Посмотреть сообщение
... data-main="a" ...
а это что? просто так писать без class или id?
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
09.07.2013, 17:14 11
pixel, a - это идентификатор группы строк...
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
13.07.2013, 17:56  [ТС] 12
Цитата Сообщение от 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="#"> потому что если ссылка не одна и она где то внизу страницы, то при ее нажатии страница обновляется и переносится наверх.
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
15.07.2013, 12:11 13
pixel, надо просто вместо строки

HTML5
1
<tr data-main="a">
сделать внутри ссылку с этим же аттрибутом:

HTML5
1
<a href="#" data-main="a">показать</a>
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
15.07.2013, 20:13  [ТС] 14
попробую, но мне кажется не все так просто

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

Добавлено через 2 минуты
Опять же нужно как то перерабатывать обработчик скрытия строк на ту же ссылку, т.к. сейчас скрытие происходит при клике на строку. но получается что нужно подменять ссылке не только текст но и группу.
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
16.07.2013, 10:39 15
Там всего 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() - функция которая скрывает/раскрывает элемент по переменно...

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

0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
16.07.2013, 15:19  [ТС] 16
Да это все понятно. Но если там 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;
   }
теперь строки где бы ни находились открываются без перезагрузки страницы.
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
16.07.2013, 15:32 17
pixel,
Javascript
1
return false;
в конце кода отменяет перезагрузку страницы.... при условии что бинд был на ссылке... да и ваще много что отменит... отправку форму например... и прочее....

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

Javascript
1
event.preventDefault;
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
16.07.2013, 15:34  [ТС] 18
не, координальные меры мне ни к чему. теперь другой вопрос, после клика на ссылке (спане) у меня подменяется текст на "Скрыть" - а при обратной операции как мне вернуть именно старое значение данного спана? оно же везде разное.
0
Develo0per
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 94
16.07.2013, 15:35 19
пример кода дай плиз... вставлю в клик тебе смену текста
0
26 / 19 / 5
Регистрация: 19.05.2009
Сообщений: 2,269
16.07.2013, 15:43  [ТС] 20
Javascript
1
2
3
4
$(document).on('click', '[data-mine]', function() {
        $('tr[data-child=' + $(this).data('mine') + ']').slideToggle();
        $('[data-mine='+$(this).data('mine') + ']').text("Скрыть");
    });
один то раз замена происходит, но наверное нужно как то в переменные кидать предыдущее значение и потом выискивать для обратной замены
0
16.07.2013, 15:43
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.07.2013, 15:43
Помогаю со студенческими работами здесь

Как правильно показывать один див и скрывать другой?
Привет! В своих проектах всегда использую плавное открытие блока div через fadeIn. Делаю так -...

При наведении/уводе мыши с элемента показывать/скрывать кнопку
Здравствуйте, есть картинки у всех одинаковые идентификаторы (они из базы выводятся), хотелось бы с...

На сайте добавить код html, который при нажатии строчки в radio списке будет скрывать одну картинку и показывать другую.
Здравствуйте, форумчане. Необходимо на сайте ucalc (конструктор калькуляторов) добавить код html,...

Скрывать или показывать элементы по клику
Здравствуйте. Есть такая проблема: есть 6 картинок, три показываются изначально. Необходимо чтобы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru