Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2009, 20:26
Интересующийся
Отправить личное сообщение для dm1tr1y Посмотреть профиль Найти все сообщения от dm1tr1y
 
Регистрация: 06.12.2008
Сообщений: 14

Динамически раскрываемая таблица
Добрый день.

Я имею таблицу следующего вида:
<table border=1 width=100%>
<tr>
<td colspan=3><h1>Раздел 1</h1><td>
</tr>
<tr>
<td>111<td>
<td>222<td>
<td>333<td>
</tr>
</table>


Хочу сделать так, чтобы при открытии страницы было видно только:
<table border=1 width=100%>
<tr>
<td colspan=3><h1>Раздел 1</h1><td>
</tr>
</table>


Но после нажатия на Раздел 1 таблица открывалась полностью, без перезагрузки страницы.

Как это возможно сделать средствами JavaScript?
Долго искал примеров, но не нашел даже этого...
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2009, 20:33
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Значит плохо искали
потому что на форуме создание спойлеров уже обсуждалось и не раз.
ищите лучше.
а делается это примерно так:
Для всех строк, которые хотите скрыть, выставляете CSS-свойство display в 'none'
по щелчку по заголовку таблицы, выставляете это свойство в ''(пустая строка), и строки при этом проявятся
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2009, 20:35
Интересующийся
Отправить личное сообщение для dm1tr1y Посмотреть профиль Найти все сообщения от dm1tr1y
 
Регистрация: 06.12.2008
Сообщений: 14

Я не знал, что это называется спойлерами.. Сейчас буду искать. Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 12.04.2009, 00:29
Интересующийся
Отправить личное сообщение для dm1tr1y Посмотреть профиль Найти все сообщения от dm1tr1y
 
Регистрация: 06.12.2008
Сообщений: 14

Нашел пример, для текстовых спойлеров. Для таблиц не видел.. Ну да не суть важно. Сделал сам:
<script language="JavaScript" type="text/javascript">
function OpenClose(id)
	{
		var obj = "";

		if (document.getElementById) obj = document.getElementById(id).style;
		else if(document.all) obj = document.all[id];
		else if(document.layers) obj = document.layers[id];

		if (obj.display == "")
			obj.display = "none";
		else
			obj.display = "";
	}
</script>

<table border='1' width='100%'>
<tr>
	<td width='33%'>111</td>
	<td width='34%'>222</td>
	<td width='33%'>333</td>
</tr>
<tr>
	<td colspan='3' class="SpoilerTop" onClick="OpenClose('1')">
		<table border='0' width='100%'>
			<tr><td align='center'><img width='20' src='plus.gif'></td><td>123</td></tr>
		</table>
	</td>
</tr>
<tr class="SpoilerBox" id="1" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr class="SpoilerBox" id="1" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<table>

Но есть одна загвоздка.. При нажатии на
<td colspan='3' class="SpoilerTop" onClick="OpenClose('1')">...</td>

открывается только одна строка, а не две как бы мне хотелось... Подскажите, как поправить?

Последний раз редактировалось dm1tr1y, 12.04.2009 в 00:54.
Ответить с цитированием
  #5 (permalink)  
Старый 12.04.2009, 13:59
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

отписался в личку
Ответить с цитированием
  #6 (permalink)  
Старый 13.04.2009, 14:56
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

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

не может быть двух элементов с одинаковым ID. у каждого элемента ID должен быть уникальный.
есть два варианта. 1. назначить ID таблице, сделать по ней getElementById, пройтись циклом getElementsByTagName по всем детям в поисках нужных сравнивая их свойства.

или. можно сделать поиск по имени класса.
можно воспользоваться кодом, предоставленным Dustin Diaz для получения всех элементов с заданным классом:

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        } //if
    } //for
    return classElements;
}
 
и вызов:
var elements = getElementsByClass("SpoilerBox", document, "TR");
//document для поиска элементов во всем дереве, или указание родителя с которого начинаешь искать
//TR - тег <tr> в котором у тебя стоят эти классы. можно * для любых тегов



а еще можно вот так:
if(document.getElementsByClassName) {
    //Firefox 3  C++ native implementation
    var elements = document.getElementsByClassName("SpoilerBox"); 
} else {
    //Dustin Diaz's getElementsByClass implementation
    var elements = getElementsByClass("SpoilerBox", document, "TR");
}


Это позволит сэкономить время поиска элементов для Gecko браузеров.

ну и далее пройтись циклом по массиву elements

Последний раз редактировалось AzriMan, 13.04.2009 в 14:59.
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2009, 20:13
Интересующийся
Отправить личное сообщение для dm1tr1y Посмотреть профиль Найти все сообщения от dm1tr1y
 
Регистрация: 06.12.2008
Сообщений: 14

Некоторое время не было возможности дописать скрипт, но чтобы закрыть вопрос полностью покажу финальный код:
<Script language="JavaScript" type="text/javascript">
function getElementsByClass(searchClass,node,tag)
	{
		var classElements = new Array();

		if (node == null)
			node = document;

		if (tag == null)
			tag = '*';

		var els = node.getElementsByTagName(tag);
		var elsLen = els.length - 1;
		var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

		for (i = 0, j = 0; i < elsLen; i++)
			if (pattern.test(els[i].className))
				{
					classElements[j] = els[i];
					j++;
				}

		return classElements;
	}

function OpenClose(CName)
	{
		var Elements = getElementsByClass(CName, document, "tr");
		var ElementsLength = Elements.length - 1;

		for (i = 0; i < ElementsLength; i++)
			if (Elements[i].display == "")
				{
					Elements[i].display = "none";
				}
			else
				{
					Elements[i].display = "";
				}
	}
</Script>

<table border='1' width='100%'>
<tr bgcolor='red'>
	<td width='33%'>111</td>
	<td width='34%'>222</td>
	<td width='33%'>333</td>
</tr>
<tr>
	<td colspan='3' class="SpoilerTop1" onClick="OpenClose('SpoilerBox1');">123</td>
</tr>
<tr class="SpoilerBox1" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr class="SpoilerBox1" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr>
	<td colspan='3' class="SpoilerTop2" onClick="OpenClose('SpoilerBox2');">123</td>
</tr>
<tr class="SpoilerBox2" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr class="SpoilerBox2" style="display:none">
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<table>


Однако, все бы хорошо, если бы не одно НО...
Скрипт не работает. У меня есть подозрение, что проблема в части:
if (Elements[i].display == "")
	{
		Elements[i].display = "none";
	}
else
	{
		Elements[i].display = "";
	}


Подскажите, пожалуйста, где я накосячил?
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2009, 01:47
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

учимся отлаживать (в ff + firebug):
1) проверяем, вызывается ли обработчик: console.log(1) в началов OpenClose (на вкладке Console firebug'а должна появиться единица)
2) проверяем значения переменных с помощью того же console.log: сколько раз выполняется цикл, чему равно .display
3) повторять до достижения нирваны
Ответить с цитированием
  #9 (permalink)  
Старый 24.04.2009, 11:27
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

а мне кажется или на момент срабатывания onClick="OpenClose('SpoilerBox1') скрипт еще не будет знать что такое SpoilerBox1?
ибо он, ведь, еще не отобразится...

--edited
ой. кажется я глупость сказал

Последний раз редактировалось AzriMan, 24.04.2009 в 15:47.
Ответить с цитированием
  #10 (permalink)  
Старый 25.04.2009, 11:37
Интересующийся
Отправить личное сообщение для dm1tr1y Посмотреть профиль Найти все сообщения от dm1tr1y
 
Регистрация: 06.12.2008
Сообщений: 14

Воспользовался FireBug-ом..

Все заработало!!!

Ура!!

Вот результат:
<Script language="JavaScript" type="text/javascript"> 
function getElementsByClass(searchClass, node, tag)
	{
		var classElements = new Array();
 
		if (node == null)
			node = document;
 
		if (tag == null)
			tag = '*';
 
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length - 1;
		var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
 
		for (i = 0, j = 0; i <= elsLen; i++)
			if (pattern.test(els[i].className))
				{
					classElements[j] = els[i];
					j++;
				}
 
		return classElements;
	}
 
function OpenClose(CName)
	{
		var Elements = getElementsByClass(CName, document, "tr");
		var ElementsLength = Elements.length - 1;
 
		for (i = 0; i <= ElementsLength; i++)
			if (Elements[i].style.display == "")
				{
					Elements[i].style.display = "none";
				}
			else
				{
					Elements[i].style.display = "";
				}
	}
</Script>
 
<table border='1' width='100%'>
<tr bgcolor='red'>
	<td width='33%'>111</td>
	<td width='34%'>222</td>
	<td width='33%'>333</td>
</tr>
<tr>
	<td colspan='3' class="SpoilerTop1" onClick="OpenClose('SpoilerBox1');">123</td>
</tr>
<tr class="SpoilerBox1" style="display:none" bgcolor='blue'>
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr class="SpoilerBox1" style="display:none" bgcolor='blue'>
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr>
	<td colspan='3' class="SpoilerTop2" onClick="OpenClose('SpoilerBox2');">123</td>
</tr>
<tr class="SpoilerBox2" style="display:none" bgcolor='blue'>
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
<tr class="SpoilerBox2" style="display:none" bgcolor='blue'>
	<td>111</td>
	<td>222</td>
	<td>333</td>
</tr>
</table>

Последний раз редактировалось dm1tr1y, 25.04.2009 в 12:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета ячейки (динамическая таблица) не по событию ImSWORDMASTER Элементы интерфейса 3 12.03.2009 21:21
Динамически заменить функцию на другую, с таким же именем SkyN Общие вопросы Javascript 2 03.02.2009 00:43
Создать объект динамически Bajjy Общие вопросы Javascript 12 26.09.2008 01:06
Динамически создаваемые компоненты Drag&Drop BEER_HUNTER Элементы интерфейса 6 22.08.2008 13:32
Помогите динамически интегрировать значение в URL Yurii Общие вопросы Javascript 14 07.05.2008 15:12