Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.12.2014, 13:39   #1
Almas01kz
Пользователь
 
Регистрация: 25.12.2014
Сообщений: 22
По умолчанию функция скрыть /показать для строк html таблицы (expand/collapse)

Нужно при нажатии на плюсик скрывались строки таблицы ... Функция expand / collapse , можно альтернативу !!!

Можно пожалуйста с наглядным примером , хотя бы html код таблицы с прописанными классами и id , а то в этом небольшое недопонимание у меня ....

Заранее спасибо !!!
Almas01kz вне форума Ответить с цитированием
Старый 30.12.2014, 13:52   #2
mv28jam
Старожил
 
Аватар для mv28jam
 
Регистрация: 09.09.2008
Сообщений: 2,714
По умолчанию

Код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table>
  <tr><td>1</td><td>2</td></tr>
  <tr id="test"><td>1</td><td>2</td></tr>
</table>





<script>

$( "#test" ).click(function() {
 $( this ).hide();
});



</script>
Стрелок-охотник
mv28jam вне форума Ответить с цитированием
Старый 30.12.2014, 13:56   #3
Almas01kz
Пользователь
 
Регистрация: 25.12.2014
Сообщений: 22
По умолчанию

Цитата:
Сообщение от mv28jam Посмотреть сообщение
Код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table>
  <tr><td>1</td><td>2</td></tr>
  <tr id="test"><td>1</td><td>2</td></tr>
</table>





<script>

$( "#test" ).click(function() {
 $( this ).hide();
});



</script>
Спасибо большое)) только вот интернета нет у компьютера )))
Almas01kz вне форума Ответить с цитированием
Старый 30.12.2014, 13:59   #4
mv28jam
Старожил
 
Аватар для mv28jam
 
Регистрация: 09.09.2008
Сообщений: 2,714
По умолчанию

Цитата:
только вот интернета нет у компьютера )))
Не вижу проблем
Скачивайте, поключайте локально.
Цитата:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Стрелок-охотник
mv28jam вне форума Ответить с цитированием
Старый 30.12.2014, 14:01   #5
Almas01kz
Пользователь
 
Регистрация: 25.12.2014
Сообщений: 22
По умолчанию

Цитата:
Сообщение от mv28jam Посмотреть сообщение
Не вижу проблем
Скачивайте, поключайте локально.
Я сижу на работе , и дали такое задание, я не смогу подключить это на сервер ))
Almas01kz вне форума Ответить с цитированием
Старый 31.12.2014, 14:53   #6
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Без jQuery:
Код:
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', function(event) {
        event.target.style.display = 'none';
    });
});
</script>
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 06.01.2015, 14:19   #7
Almas01kz
Пользователь
 
Регистрация: 25.12.2014
Сообщений: 22
По умолчанию

Цитата:
Сообщение от Fenex Посмотреть сообщение
Без jQuery:
Код:
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', function(event) {
        event.target.style.display = 'none';
    });
});
</script>

Большое спасибо !! Так и сделал !! А как закрывать строки, которые уровнем будут ниже к примеру ... Есть 4 уровня , при закрытии 1-го, чтобы закрылись все остальные ...
Almas01kz вне форума Ответить с цитированием
Старый 06.01.2015, 18:46   #8
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

В инструментах разработчиков выведите в консоль event.target и покопайтесь в свойствах этого элемента. Смотреть в сторону firstChild \ nextSibling.
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 19.01.2015, 18:03   #9
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Стрелка

Вариант 1
Демо:http://jsfiddle.net/NZaw4/10/embedded/result . Исходники:http://jsfiddle.net/NZaw4/10

Достоинства:
- высокая скорость

Недостатки:
- у каждой строки должен быть свой CSS-класс (lev1, lev2 и т.д.)


Вараинт 2
Демо:http://jsfiddle.net/NZaw4/55/embedded/result . Исходники:http://jsfiddle.net/NZaw4/55

Достоинства:
- на входе имеем обычную, простую таблицу вида <tr> <td> </td> </tr> безо всяких идентификаторов строки, стилей и т.д.

Недостатки:
- медленная работа при большом количестве строк и большой вложенностью групп
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть/Показать панель UKRtortik Общие вопросы Delphi 10 01.06.2014 22:20
TreeView и Expand/Collapse с анимацией kettanaito Общие вопросы Delphi 3 23.10.2011 18:57
Java script показать/скрыть для лупа Krasi PHP 0 24.08.2011 19:28
Показать/скрыть edit`ы Rapala Общие вопросы Delphi 3 11.05.2010 09:20
Как локаольно отменить border-collapse:collapse;? max_kulikoff HTML и CSS 1 09.05.2009 15:58