Søg
Avatar billede the_saint Nybegynder
26. august 2006 - 11:07 Der er 3 kommentarer og
1 løsning

show/hide tr fejler i FF

Skal have en knap som viser og skjuler en <tr>, nedenstående kode fungere fint i IE og Opera, men ikke FF:.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display = "block";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png"> Menu heading
                    </td>
                </tr>
                <tr>
                    <td class="content" id="menu_1" style="display:block;">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </td>
                </tr>
            </table>

</body></html>
Avatar billede mclemens Nybegynder
26. august 2006 - 11:24 #1
td er ikke et block element ...




eksempler ... dette virker ikke i IE, men mest korrekt da tr er en table-row:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display = "table-row";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png" alt="midlertidig alt"> Menu heading
                    </td>
                </tr>
                <tr id="menu_1">
                    <td class="content">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </td>
                </tr>
            </table>

</body></html>



virker i IE og FF:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display = "block";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png" alt="midlertidig alt"> Menu heading
                    </td>
                </tr>
                <tr id="menu_1">
                    <td class="content">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </td>
                </tr>
            </table>

</body></html>







alternativet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display = "block";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png" alt="midlertidig alt"> Menu heading
                    </td>
                </tr>
                <tr>
                    <td class="content"><div id="menu_1">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </div></td>
                </tr>
            </table>

</body></html>
Avatar billede mclemens Nybegynder
26. august 2006 - 11:27 #2
td er table-cell men det ved IE ikke eksempel:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display = "table-cell";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png" alt="midlertidig alt"> Menu heading
                    </td>
                </tr>
                <tr>
                    <td class="content" id="menu_1">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </td>
                </tr>
            </table>

</body></html>





... så kan man selvfølgelig lave en IE fidus ... men jeg ville selv foretrække den sidste i 26/08-2006 11:24:19


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;
    function ActivateMenu(img,id)
    {
        e = document.getElementById(id);
        if(e.style.display == "none")
        {
            e.style.display =(IE)?"block":"table-cell";
            img.src = "bullet_arrow_up.png";
        }
        else
        {
            e.style.display = "none";
            img.src = "bullet_arrow_down.png";
        }
    }
</script>
</head><body>

            <table cellpadding="0" cellspacing="0" class="menu_item">
                <tr>
                    <td class="heading">
                        <img style="cursor:pointer;" onclick="ActivateMenu(this, 'menu_1');" src="bullet_arrow_up.png" alt="midlertidig alt"> Menu heading
                    </td>
                </tr>
                <tr>
                    <td class="content" id="menu_1">
                        Menupunkt 1<br />
                        Menupunkt 2<br />
                        Menupunkt 3<br />
                        Menupunkt 4<br />
                    </td>
                </tr>
            </table>

</body></html>
Avatar billede the_saint Nybegynder
26. august 2006 - 11:27 #3
Ahh, havde simpelthen fået sat den på <td> og ikke <tr>.. Igen, tak mclemens - du er en skat :o)
Avatar billede mclemens Nybegynder
26. august 2006 - 11:28 #4
Hehe, velbekom ... og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 21:35 Lidt simpel (håber jeg) Photoshop hjælp Af fcs i Billedbehandling
I går 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I går 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
15/0511:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
White papers
Flere white papers »