Показано с 1 по 7 из 7

Тема: Сворачивание блоков таблицы.

  1. #1

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Значит так. Никогда раньше не приходилось такое делать. Прошу помощи. Есть условная таблица с 2мя ячеками A и В. Задача состоит в том, чтобы при нажатии на ячейку A, ячейка B пропадала. Ниже пример кода со спрятанной ячейкой, вопрос в том теперь как с помощью DHTML заставить при нажатии на ячйку А, ячейку В сворачиваться и разворачивать, помогите понять принцип, пожалуйста.
    Код:
    <table>
     *<tr>
     * *<td>A</td>
     * *<div style="display: none;"><td>B</td></div>
     *</tr>
    </table>

  2. #2

    Регистрация
    25.07.2005
    Сообщений
    39
    Можно так:
    Код:
    <table>
     <tr>
     * <td onclick="td2.style.display=(td2.style.display!=&#39;&#39;)?&#39;&#39;:&#39;none&#39;">A</td>
     * <td id="td2">B</td>
     </tr>
    </table>

  3. #3

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Пасиб огромное, это то, что мне нужно было. Теперь развитие темы. Немного усложняю таблицу, хочу, чтобы сворачивалось одновременно в ячейки, но, если им обеим присваиваю id="2", то выскакивает ошибка!

    Для наглядности, я разукрасил ячекм разными цветами.

    Код:
    <table width="500" height="50" cellspacing="0" cellpadding="0" border="1">
    <tr>
     * *<td id="td2" bgcolor="red" >B</td>
     * *<td id="td2" bgcolor="blue" rowspan="2">C</td>
    </tr>
    <tr>
     * *<td onclick="td2.style.display=(td2.style.display!=&#39;&#39;)?&#39;&#39;:&#39;none&#39;" bgcolor="orange">A</td>
    </tr>
    </table>

  4. #4

    Регистрация
    25.07.2005
    Сообщений
    39
    id должно быть уникальным:
    Код:
    <table width="500" height="50" cellspacing="0" cellpadding="0" border="1">
    <tr id="td2">
     * <td bgcolor="red" >B</td>
     * <td bgcolor="blue" rowspan="2">C</td>
    </tr>
    <tr>
     * <td onclick="td2.style.display=(td2.style.display!=&#39;&#39;)?&#39;&#39;:&#39;none&#39;" bgcolor="orange">A</td>
    </tr>
    </table>

  5. #5

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    ага, так значит, сенкс...

    а как реализуется вот что...

    Код:
    <table>
    <tr>
     *<td onclick="td2.style.display=(td2.style.display!=&#39;&#39;)?&#39;&#39;:&#39;none&#39;">[img]arrow_up.gif[/img]</td>
     *<td id="td2">B</td>
    </tr>
    </table>
    Добавим в ячейку отвечающую за сворачивание другой ячейки изображение стрелочки. Каким образом реализуется вот что. Необходимо, чтобы после скрытия панели вместо изображения arrow_up.gif отображалось arrow_down.gif и alt="Cвернуть панель" менялся на alt="Развернуть панель"?

    Заранее благодарен.

  6. #6

    Регистрация
    25.07.2005
    Сообщений
    39
    На скорую руку - полагаю со старыми браузерами код не будет работать

    Код:
    <script language="JavaScript" type="text/javascript">
    function changeimg(){
    if (td2.style.display==&#39;&#39;){
     *td2.style.display = &#39;none&#39;;
     *img1.src = &#39;arrow_down.gif&#39;;
     *img1.title = &#39;Развернуть панель&#39;;
    }
    else {
     *td2.style.display = &#39;&#39;;
     *img1.src = &#39;arrow_up.gif&#39;;
     *img1.title = &#39;Cвернуть панель&#39;;
    }
    }
    </script>
    <table>
    <tr>
     <td onclick="changeimg()">[img]arrow_up.gif[/img]</td>
     <td id="td2">B</td>
    </tr>
    </table>
    alt заменил на title, т. к. только он обеспечит правильную работу в других браузерах отличных от ие.

    Напоследок, стоит просмотреть какой нидь справочник по DHTML, после чего подобные вопросы отпадут

    Удачи!

  7. #7

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    огромное спасибо

Похожие темы

  1. Страница из 3х блоков
    от shreq в разделе Вёрстка сайта
    Ответов: 1
    Последнее сообщение: 05.11.2007, 04:44
  2. проваливание блоков в ИЕ
    от DELPHIna в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 18.09.2007, 19:42
  3. Высота вложенных блоков
    от Рёга в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 02.04.2007, 23:28
  4. Линия из 3х блоков
    от snekaaa в разделе Вёрстка сайта
    Ответов: 9
    Последнее сообщение: 12.03.2007, 09:51
  5. CSS дизайн. Чентральное расположение блоков.
    от Nicolas Prof в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 16.05.2005, 01:25

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •