Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с простейшим спойлером (https://javascript.ru/forum/events/22946-problema-s-prostejjshim-spojjlerom.html)

NameX 06.11.2011 18:09

Проблема с простейшим спойлером
 
Привет всем!
Проблема состоит в том что при нажатии на кнопку должена показаться строка таблицы и в этой строке данные. Но при выводе все показывается как-то криво. Хотя структура таблицы правильная.

<script type="text/javascript">
function spoiler(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];
else
return 1;

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

Табличка:
<table cellpadding="4px" width="99%" border="1">
<tr>
<td>Заголовок</td><td> </td><td> </td>
</tr>
<tr class="main_tr">
<td> Текс текст текст</td>
<td width="10%"><buttonp>Удалить</buttonp></td>
<td width="10%"><buttonp onclick="spoiler('spoiler1');">
Редактировать</buttonp></td>
</tr>
<tr style="display: none;" id="spoiler1">
<td>
<form name="send" method="post" action="">
<textarea name="text" style="width:60%; height: 200px;">Текст текс текст</textarea>
<buttonp>Изменить</buttonp>
</form>
</td>
</tr>
<tr class="main_tr">
<td> Блам блам блам</td>
<td width="10%"><buttonp>Удалить</buttonp></td>
<td width="10%"><buttonp onclick="spoiler('spoiler2');">
Редактировать</buttonp></td>
</tr>
<tr style="display: none;" id="spoiler2">
<td>
<form name="send" method="post" action="">
<textarea name="text" style="width:60%; height: 200px;">Бука бука букаамва ва</textarea>
<buttonp>Изменить</buttonp>
</form>
</td>
</tr>
<table>

NameX 06.11.2011 18:17

нашел сам решение:
else
obj.display = "table-row";
}

Почемучкин 06.11.2011 18:18

Конечно криво будет показываться.
В этой строке 3 ячейки:
<tr class="main_tr">
20	<td> Блам блам блам</td>
21	<td width="10%"><buttonp>Удалить</buttonp></td>
22	<td width="10%"><buttonp onclick="spoiler('spoiler2');">
23	Редактировать</buttonp></td>
24	</tr>

А в этой строке одна ячейка:
25	<tr style="display: none;" id="spoiler2">
26	<td>
27	<form name="send" method="post" action="">
28	<textarea name="text" style="width:60%; height: 200px;">Бука бука букаамва ва</textarea>
29	<buttonp>Изменить</buttonp>
30	</form>
31	</td>
32	</tr>


Часовой пояс GMT +3, время: 07:13.