Динамически раскрываемая таблица
 

Добрый день.

Я имею таблицу следующего вида:

<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?
Долго искал примеров, но не нашел даже этого...

Значит плохо искали
потому что на форуме создание спойлеров уже обсуждалось и не раз.
ищите лучше.
а делается это примерно так:
Для всех строк, которые хотите скрыть, выставляете CSS-свойство display в 'none'
по щелчку по заголовку таблицы, выставляете это свойство в ''(пустая строка), и строки при этом проявятся

Я не знал, что это называется спойлерами.. Сейчас буду искать. Спасибо.

Нашел пример, для текстовых спойлеров. Для таблиц не видел.. Ну да не суть важно. Сделал сам:

<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>

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

отписался в личку

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

не может быть двух элементов с одинаковым 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

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

<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 = "";
	}

Подскажите, пожалуйста, где я накосячил?

учимся отлаживать (в ff + firebug):
1) проверяем, вызывается ли обработчик: console.log(1) в началов OpenClose (на вкладке Console firebug'а должна появиться единица)
2) проверяем значения переменных с помощью того же console.log: сколько раз выполняется цикл, чему равно .display
3) повторять до достижения нирваны ;)

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

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

Воспользовался 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>