VPF::скрытые строки в таблице - Форум программистов

Exploiter

Дата 23.11.2006, 06:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 27.6.2006

Репутация: нет
Всего: 1

Добрый день уважаемые эксперты!

проблема у меня следующего характера:
имеется таблица, при клике на картинку появляются скрытые строчки. Я написал отдельно скрипт и при его использовании с простым текстом он работает
Но если внутрь блока <div> внести не только простой неформатированный текст, а еще и теги <tr><td>, он работать не правильно.
как заставить работать скпипт при добавлении в него табличных тегов?
Несомненно многие из вас сталкивались с такой проблемой.
Заранее благодарю

Код


function changeText(id) {
//открывашка сообщений 
    if (! id) {return;}
    var obj = document.getElementById('tag_'+id);
    var a_obj = document.getElementById('atag_'+id);
    
    var sCnt = document.getElementsByName('tag_'+id).length;
    var sArray = document.getElementsByName('tag_'+id);
    
    for (var i = 0; i < sCnt; i++) {
        obj = sArray[i];
        if (obj.style.display=='none') {
            obj.style.display='block';
            a_obj.innerHTML='<img src="/img/closed.gif" border=0 alt="+">'
        } else {
            obj.style.display='none';
            a_obj.innerHTML='<img src="/img/opened.gif" border=0 alt="-">'
        }
        
    }

Код


<table>
            
    <tr class="headGrouping">
        <td class="RowCenter" ><a id="atag_054" name="atag_054" href="javascript://" onClick="changeText('054')" ><img src="/img/closed.gif" border=0 alt="+"></td>
        <td class="rowleft">Заголовок</td>
        <td class="RowCenter">054</td>
    </tr>
    <tbody id="tag_054" style="display:none">
        <div id="tag_054">
            <tr>
                <td class="rowleft"><img src="/img/next1.gif"/>&nbsp;<a id="atag_fin" name="atag_[fin]" href="javascript://" onClick="changeText('[fin]')" ><img src="/img/closed.gif" border=0 alt="+"></a></td>
                <td class="rowleft">Заголовок1</td>
                <td class="rowright">0,00</td>
            </tr>
                                
                    <tr id="tag_[fin]" name="tag_[fin]" style="display:none">
                        <td class="rowcenter"><img src="/img/next1.gif"/>&nbsp;&nbsp;<a id="atag_ex" name="atag_[ex]" href="javascript://" onClick="changeText('[ex]')" ><img src="/img/closed.gif" border=0 alt="+"></a></td>
                        <td class="rowleft">Заголовок2</td>
                        <td class="rowright">0,00</td>
                    </tr>
                                            
                        <tr class="total2" id="tag_[ex]" name="tag_[ex]" style="display:none">
                            <td class="rowcenter"></td>
                            <td class="rowleft">Заголовок2_</td>
                            <td class="rowright">0,00</td>
                        </tr>
                        
                        <tr class="total2" id="tag_[ex]" name="tag_[ex]" style="display:none">
                            <td class="rowcenter"></td>
                            <td class="rowleft"> Заголовок2__</td>
                            <td class="rowright">0,00</td>
                        </tr>
                    <tr id="tag_[ex]" name="tag_[7210]" style="display:none">
                        <td class="rowcenter">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="atag_exdet" name="atag_[7210]" href="javascript://" onClick="changeText('[7210]')" ><img src="/img/closed.gif" border=0 alt="+"></a></td>
                        <td class="rowleft" > Заголовок3</td>
                        <td class="rowright">0,00</td>
                    </tr>
                    <tr id="tag_[7210]" name="tag_[7210]" style="display:none">
                        <td class="level3" class="rowcenter"></td>
                        <td class="rowleft"> Заголовок3_</td>
                        <td class="rowright">0,00</td>
                    </tr>

                            
        </div>
    </tbody>
    </table>

SelenIT

Дата 23.11.2006, 12:54 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Exploiter,

Цитата(Exploiter @ 23.11.2006, 06:20

)

если внутрь блока <div> внести не только простой неформатированный текст, а еще и теги <tr><td>, он работать не правильно.

Абсолютно верно, т.к. такая разметка ни с какой стороны невалидна и браузеры ее дополняют кто во что горазд - части таблицы могут быть вложены только в таблицу. Отсуюда вывод - тег div (тем более с id, повторяющим чужой) тут абсолютно лишний, достаточно менять видимость у tbody. Чтобы он становился видимым во всех браузерах, вместо display='block' лучше задавать display='' (а еще лучше, при скрытии добавлять класс с display:none, а при показе его убирать).

И еще, зачем переписывать картинку "скрыть/открыть" целиком через innerHTML, разве не достаточно менять ее src?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Exploiter

Дата 24.11.2006, 13:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 27.6.2006

Репутация: нет
Всего: 1

Цитата

тобы он становился видимым во всех браузерах, вместо display='block' лучше задавать display=''

разве можно так писать я пробовал в Opere не помагает

Цитата

И еще, зачем переписывать картинку "скрыть/открыть" целиком через innerHTML, разве не достаточно менять ее src?

Для того чтобы было видно что открыть а что закрыть, картинки предсавлены как "+" и "-"

SelenIT

Дата 24.11.2006, 13:51 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Exploiter, такой простейший пример у меня в Опере 9 работает:

Код


<table border="1">
<thead>
<tr><td onclick="var tbs=document.getElementById('tb').style; tbs.display = tbs.display=='none'?'':'none';">Click!</td></tr>
</thead>
<tbody id="tb" style="display: none;">
<tr><td>Text</td></tr>
<tr><td>More text</td></tr>
</tbody>
</table>

В более ранних не проверял, но не вижу противопоказаний... Хотя правильнее и, видимо, по большому счету удобнее все-таки менять className.

Цитата(Exploiter @ 24.11.2006, 13:38

)

чтобы было видно что открыть а что закрыть, картинки предсавлены как "+" и "-"

И что же, ради смены плюса на минус обязательно переписывать целый кусок HTML, просто поменять src существующей картинки на нужный файл недостаточно?

Это сообщение отредактировал(а) SelenIT - 24.11.2006, 13:53

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Exploiter

Дата 24.11.2006, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 27.6.2006

Репутация: нет
Всего: 1

Согласен работает буду переделывать

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »