Форум Сайтостроение Веб-строительство

Выпадающие строки в <table>

seo3_Kul
На сайте с 25.10.2010
Offline
146
seo3_Kul
3758

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


<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Товар</td>
<td>Ширина</td>
<td>Длина</td>
<td>Высота</td>
</tr>
<tr>
<td>Категория №1</td>
</tr>
<tr>
<td>Товар №1</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Товар №2</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Категория №2</td>
</tr>
<tr>
<td>Товар №1</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Товар №2</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

То есть есть таблица

Первая строка - общая для всей талицы

Вторая строка - Категория №1

Третья строка - Категория №2

Нажимаем на строку Категория №1

и у нас выдвигаются еще две строки с Товар №1 и Товар №2

Нажимаем на строку Категория №2

и у нас выдвигается еще две строки с Товар №1 и Товар №2 уже Категории №2 (в идеале при этом, чтобы Товар №1 и Товар №2 Категории №1 закрылись).

Возможно ли такое осуществить?

заранее спасибо

Продвижение и раскрутка сайтов!
VHS-1980
На сайте с 21.05.2010
Offline
91
VHS-1980
#1

конечно возможно. принцип действий любого меню по типу проводника в винде - можете нарыть на сайтах со скриптами на JS. главное обозначить уровень этого псевдоменю айдишниками, классами и т.п. и при каждом клике сворачивать все ненужно и разворачивать нужное.

javascript родитеский элемент Разворачивающийся текст в категории, Нужна верстка
Q8
На сайте с 02.08.2012
Offline
31
q8888
#2

Попробуйте такой вариант, правда без автосворачивания 


<html>

<head>

<style>

.child {display:none;}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">  

$(function() {

    $('.parent').click(function() {

        $(this).nextUntil('.parent', 'tr.child').slideToggle();

        $(this).toggleClass('open');

    });

});

</script> 

</head>



<body>

<table border="1" width="100%">

  <tr class='header'>

    <th>01</th><th>02</th>

  </tr>

  <tr class='parent'>

    <td colspan="2">1</td>

  </tr>

  <tr class='child'>

    <td>11</td><td>12</td>

  </tr>

  <tr class='child'>

    <td>13</td><td>14</td>

  </tr>

  <tr class='parent'>

    <td colspan="2">2</td>

  </tr>

  <tr class='child'>

    <td>21</td><td>22</td>

  </tr>

  <tr class='parent'>

    <td colspan="2">3</td>

  </tr>

  <tr class='child'>

    <td>31</td><td>32</td>

  </tr>

  <tr class='child'>

    <td>33</td><td>34</td>

  </tr>

  <tr class='child'>

    <td>35</td><td>36</td>

  </tr>

  <tr class='child'>

    <td>37</td><td>38</td>

  </tr>

  <tr class='parent'>

    <td colspan="2">4</td>

  </tr>

  <tr class='child'>

    <td>41</td><td>42</td>

  </tr>

</table>

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий