[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Скрываем таблицу
Форум PHP программистов > JavaScript
grant
17.05.2011 - 16:17
Есть документ, в нём 10 таблиц. Как можно скрыть все эти 10 таблиц, оставиь только заголовок, а при на жатии на заголовок, развернуть 1 таблицу и т.д. ?



Спустя 4 минуты (17.05.2011 - 15:21) Snus написал(а):
grant
Такая схема будет сильно тормозить (я имею ввиду с таблицами), но ты можешь имитировать таблицы блоками div и использовать библиотеку jQuery, функцию toggle();

Спустя 2 минуты, 47 секунд (17.05.2011 - 15:23) grant написал(а):
А поля можно скрыть, а при нажатии название таблицы октрывать их ?

Спустя 36 секунд (17.05.2011 - 15:24) Snus написал(а):
grant
Можно, но это тормозной вариант smile.gif

Спустя 1 минута, 16 секунд (17.05.2011 - 15:25) grant написал(а):
Цитата (Snus @ 17.05.2011 - 12:24)
grant
Можно, но это тормозной вариант smile.gif

а как это вообще делается, можешь принцип описать? или сразу код )

Спустя 6 минут, 31 секунда (17.05.2011 - 15:32) Snus написал(а):
grant
Путь к библиотеке у себя свой поставь

<script src="js/jquery.js"></script>
<script>

	$(document).ready(function(){
		$('table.tbl thead').click(function(){
			$(this).parent().find('tbody').toggle();
		});
	});

</script>

<style>
table.tbl tbody {
	display: none;
}
</style>


<table class="tbl" border="1">
<thead>
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>

<table class="tbl" border="1">
<thead>
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>

Спустя 6 минут, 30 секунд (17.05.2011 - 15:38) ApuktaChehov написал(а):
Snus - а в честь чего оно тормозить-то будет? По моему имитация таблиц дивами - это извращение.

grant - сделайте 10 дивов. В каждый див поместите спан - это будет заголовок. После спана, в том же диве, вставьте вашу таблицу. Все таблицам сделайте display: none; А при нажатии на спан сделайте таблице display: block;
Если будут вопросы пишите. Делается в 2 счета.

И хватит уже тыкать эту JQuery где не попади. Элементарнейшие вещи сделать, и то без фреймворков не можем. Стыдно!

Спустя 2 минуты, 19 секунд (17.05.2011 - 15:41) Snus написал(а):
Цитата (ApuktaChehov @ 17.05.2011 - 12:38)
Элементарнейшие вещи сделать, и то без фреймворков не можем

Можем, но не хотим. На чем лучше ехать на дачу - на машине или велосипеде? Быстрее и удобнее будет на машине, верно? Но на нее затратиться придется (бензин). Вот в этом случае - машина - это jQuery, а javascript - велосипед.

Спустя 5 минут, 18 секунд (17.05.2011 - 15:46) ApuktaChehov написал(а):
Snus - сравнение... ну ладно.
Если на то пошло, то чистый javascript, побыстрее jQuery работает - это раз. Во вторых на велосипеде для здоровья полезнее. В третьих на велосипеде - где едешь - там и дорога, на машине придется постоять в пробке.

Минусы - это скорость разработки. Но в подобных элементарных вещах - равнозначно.

Спустя 4 минуты, 22 секунды (17.05.2011 - 15:50) grant написал(а):
Спасиб.

Спустя 18 минут, 30 секунд (17.05.2011 - 16:09) Snus написал(а):
ApuktaChehov
Цитата (ApuktaChehov @ 17.05.2011 - 12:46)
Если на то пошло, то чистый javascript, побыстрее jQuery работает - это раз.

Давно ты скрость работы сверял? У тебя устаревшие данные.

Спустя 10 минут, 28 секунд (17.05.2011 - 16:19) ApuktaChehov написал(а):
Snus - вы, должно быть знаете, что jQuery написан на javascript, а значит,что jQuery в принципе не может быстрее работать. А учитывая сколько методов создает ваш пример кода, и сколько еще скрыто всякого под этим кодом, мне очень тяжело будет согласиться даже на одинаковую скорость их работы. Но может быть я ошибаюсь... тогда просветите меня!

Спустя 22 минуты, 11 секунд (17.05.2011 - 16:41) Snus написал(а):
ApuktaChehov
Я предпочитаю аргументы во временном эквиваленте. На этом примере напиши на JS и используй мой код и посмотри разницу.

Спустя 33 минуты, 12 секунд (17.05.2011 - 17:15) ApuktaChehov написал(а):
Вот: мой

Спустя 38 секунд (17.05.2011 - 17:15) ApuktaChehov написал(а):
вот: твой

Спустя 5 минут, 53 секунды (17.05.2011 - 17:21) Snus написал(а):
ApuktaChehov
А код JS не показал.

Спустя 2 часа, 25 минут, 4 секунды (17.05.2011 - 19:46) ApuktaChehov написал(а):
Snus - так говоришь, как будто бы я специально подделываю результаты, что бы оказаться правым. Не успел выложить. Офис закрывали, едва успел скрины выложить. Завтра утром покажу. Там функция из одной строчки.

Спустя 2 часа, 44 минуты, 33 секунды (17.05.2011 - 22:31) Basili4 написал(а):
Люблю холивары. Вставлю свои 5 коп.

Я как то делал не особо большой проект. и писал на нативной js. Всякие ваши аяксы отбор эл. по id по классам и т.д. резе сколько то времени пришел к выводу что леплю подобие jQuery.

Я вот к чему еслии задача простоя показать/ скрыть див то конечно не стоить тягать с собой JQ. Но если больше то беру и. к тому же 80 килобайт не так много и если учитывать то что 30% сайтов пользуют JQ то можно предположить что либа уже лежит в кеше браузера и тянуть её он еще разок не будет.

Спустя 38 минут, 57 секунд (17.05.2011 - 23:10) Snus написал(а):
Я хочу увидеть как ApuktaChehov сделает аналог того кода, что я выложил (и что просил автор) на JS. И сравним коды и скорости.
PS: автор просил не спрятать таблицу в див, а скрывать содержимое таблицы, а показывать только заголовки и при нажатии на них, открывать содержимое.

Спустя 8 минут, 23 секунды (17.05.2011 - 23:18) Basili4 написал(а):
Snus
Ну я как вижу дело то 3 строчек.
Заголовки th /th

строки tr

var t=document.getElementById('Table1');

var es=t.getElementsByTag('tr');

далее проходим по массиву es и скрываем если не скрыто и показываем если скрыто все что там есть.

вроде все.

Спустя 10 часов, 33 минуты, 42 секунды (18.05.2011 - 09:52) ApuktaChehov написал(а):
И так как и обещал:
Скрипт твой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=cp1251" />
	<title>Неназванный 1</title>

</head>
<script src="jquery.js"></script>
<body>
<script>
    $(document).ready(function(){
		$('table.tbl thead').click(function(){
			$(this).parent().find('tbody').toggle();
		});
	});    
    
</script>
<table class="tbl" border="1">
<thead>
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>

<table class="tbl" border="1">
<thead>
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>
</body>
</html>

Спустя 54 секунды (18.05.2011 - 09:53) ApuktaChehov написал(а):
Скрипт мой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=cp1251" />
	<meta name="author" content="ZAO PK Rust-Press" />

	<title>Неназванный 1</title>

</head>

<body>
<script>
    function sh(obj) {
        if(obj.parentNode.getElementsByTagName('tbody')[0].style.display == 'block')
            obj.parentNode.getElementsByTagName('tbody')[0].style.display = 'none';
        else
            obj.parentNode.getElementsByTagName('tbody')[0].style.display = 'block';
    }    
</script>
<table class="tbl" border="1">
<thead onclick="sh(this);">
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>

<table class="tbl" border="1">
<thead>
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</tbody>
</table>
</body>
</html>

Спустя 1 минута, 30 секунд (18.05.2011 - 09:54) ApuktaChehov написал(а):
Этот тест проводился только для скрытие тела таблицы. Функцию свою я дополнил. Она теперь не только скрывать, но и раскрывать тело таблицы может.

Спустя 23 минуты, 46 секунд (18.05.2011 - 10:18) Snus написал(а):
ApuktaChehov
Ты проверял работу своего скрипта?
Таблица раскрывается криво.

Спустя 25 минут (18.05.2011 - 10:43) ApuktaChehov написал(а):
Snus - ну вот к чему это? От того, чем станет тег tbody, собой или блоком, скорость работы не изменится. Я думал, ты серьезно хочешь протестировать скорость. В итоге начинаешь к мелочам придираться. Ну ладно, если тебе будет легче:

    function sh(obj) {
        if(obj.parentNode.getElementsByTagName('tbody')[0].style.display == 'table-row-group' || obj.parentNode.getElementsByTagName('tbody')[0].style.display == '')
            obj.parentNode.getElementsByTagName('tbody')[0].style.display = 'none';
        else
            obj.parentNode.getElementsByTagName('tbody')[0].style.display = 'table-row-group';
    }


Заметь функция усложняется и скорость ее работы тоже падает.

Спустя 28 минут, 44 секунды (18.05.2011 - 11:12) Snus написал(а):
ApuktaChehov
Цитата (ApuktaChehov @ 18.05.2011 - 07:43)
Я думал, ты серьезно хочешь протестировать скорость. В итоге начинаешь к мелочам придираться

Что за детские разговоры? Речь идет о "Рабочем" скрипте, а не лишь бы написать. Вот и предоставь "рабочий" скрипт и тогда уже измерять скорость. Вот теперь показывай результаты.

Спустя 7 минут, 51 секунда (18.05.2011 - 11:20) ApuktaChehov написал(а):
вот

Спустя 35 секунд (18.05.2011 - 11:20) ApuktaChehov написал(а):
Snus - да и чего, я да я. У тебя FF есть? Если есть, то сам можешь все увидеть.

Спустя 21 секунда (18.05.2011 - 11:20) Snus написал(а):
А чтоб видеть более точные результаты, сделай табличку побольше. 

<table class="tbl" border="1">
<thead onclick="sh(this);">
	<tr>
		<th>Тыц 1</th>
		<th>Тыц 2</th>
		<th>Тыц 3</th>
		<th>Тыц 4</th>
		<th>Тыц 5</th>
		<th>Тыц 6</th>
		<th>Тыц 7</th>
		<th>Тыц 8</th>
		<th>Тыц 9</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</tbody>
</table>

Спустя 1 минута, 34 секунды (18.05.2011 - 11:22) Snus написал(а):
ApuktaChehov
А мне этого не надо. Ты поднял вопрос о скорости. Чистый JS безусловно выполняется быстрее, но не на столько, чтобы я отказался от библиотеки jQuery. Я предпочитаю удобство, а не сэкономить 0.1 секунды.

Спустя 10 минут, 48 секунд (18.05.2011 - 11:33) ApuktaChehov написал(а):
да я и не пытаюсь убедить тебя отказаться от JQuery. Удобство - понятие относительное. Но если человек просит сделать элементарную вещь не стоит сразу подсаживать его на вреймворки. Пусть он хотя бы простые вещи научится делать.

Я против фремворков, пока их пользователь не знает/понимает как это работает.
А когда он узнает/поймет все это - тогда можно пользоваться чем угодно.

Спустя 7 минут, 48 секунд (18.05.2011 - 11:41) ApuktaChehov написал(а):
Хотя, я наверное идеалист. Я считаю, что если человек взялся за это дело, так пусть учится качественно.

Спустя 1 час, 6 минут, 38 секунд (18.05.2011 - 12:47) Snus написал(а):
ApuktaChehov
Фреймворк для того и существует, чтобы облегчать работу программистам,а не забивать *** на изучения языка. Мне он реально помогает. Мне это удобно. Это лично мое мнение и я им делюсь, основываясь на своих представлениях. У тебя свои представления и никто не осуждает твой выбор, но и ты тогда не критикуй чужие.

Спустя 37 минут, 48 секунд (18.05.2011 - 13:25) ApuktaChehov написал(а):
Snus - я осуждаю тебя за то, что ты пытаешься забивать гвоздь экскаватором. Это называется избыточностью.

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

Спустя 27 минут, 31 секунда (18.05.2011 - 13:53) Snus написал(а):
ApuktaChehov
А зачем мне изучать то, что я уже знаю?

Спустя 1 минута, 49 секунд (18.05.2011 - 13:54) ApuktaChehov написал(а):
Snus - вот! Вот! А автор темы ведь не знает! Именно к этому я и веду!
Нам же в первых классах не выдавали калькуляторы. Ведь они сокращают время работы, ими удобно пользоваться. Хотя я где то слышал, что сейчас хотят в начальных школах, на уроках математики разрешить калькуляторы.
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.