Avatar billede tri Nybegynder
08. juli 2002 - 09:55 Der er 16 kommentarer og
2 løsninger

Tabel - synlig/usynlig

Hej.

Jeg har fundet dette eksempel:


<html>
    <head>
        <script language="JavaScript">
            function toggleShow(blok)
            {    var blokElement = document.getElementById(blok);
                if (blokElement.style.display =='')
                {    blokElement.style.display = 'none';
                } else {
                    blokElement.style.display='';
                }
            }
        </script>
    </head>
    <body>
        <div id="unik_div_id">

        <% out.println("hej");%>

        </div>

        <a href='java script:toggleShow("unik_div_id");'>Vis detaljer</a>
    </body>
</html>

------------------------------------------
Jeg ønsker noget ligende, nemlig dette:

Jeg har denne tabel:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="822*" border="1">
  <tr>
    <td><b>Detaljer</b></td>
    <td><b>Fornavn</b></td>
    <td><b>Efternavn</b></td>
  </tr>
  <tr>
    <td>Vis detaljer</td>
    <td>per</td>
    <td>petersen</td>
  </tr>
  <tr>
    <td>Vis detaljer</td>
    <td>hans</td>
    <td>hansen</td>
  </tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>


Når jeg trykker på detaljer på øverste linje, ønsker jeg at en ny tabel skal blive synlig, nemlig denne:

<table width="822*" border="1">
  <tr>
    <td>Fornavn</td>
    <td>Efternavn</td>
    <td>Adresse</td>
    <td>Postnr</td>
    <td>Tlfnr</td>
  </tr>
  <tr>
    <td>Per</td>
    <td>Petersen</td>
    <td>Vej 5</td>
    <td>8000</td>
    <td>45654521</td>
  </tr>
</table>


Når jeg trykker på detaljer igen skal den nederste tabel naturligvis forsvinde igen.



(Det skal laves på denne måde, da jeg senere ønsker at danne den nederste tabel dynamisk, alt efter hvad der trykkes på)

Avatar billede -master-d- Nybegynder
08. juli 2002 - 10:23 #1
Mener du sådan her ?


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function visDetaljer(blok){
blokken = document.all[blok]
if (blokken.style.display == 'none'){
blokken.style.display = 'block';
aktiv = 1
} else if(aktiv = 1){
blokken.style.display = 'none';
aktiv = 0
}
}
function skjul(){
blokken = document.all['Petersen']
if (blokken.style.display == 'block'){
blokken.style.display = 'none';
aktiv = 0;
}
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="822*" border="1">
  <tr>
    <td><b>Detaljer</b></td>
    <td><b>Fornavn</b></td>
    <td><b>Efternavn</b></td>
  </tr>
  <tr>
    <td><a href="" onclick="visDetaljer('Petersen');">Vis detaljer</a></td>
    <td>per</td>
    <td>petersen</td>
  </tr>
  <tr>
    <td>Vis detaljer</td>
    <td>hans</td>
    <td>hansen</td>
  </tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="display:none;" id="Petersen"><table width="822*" border="1">
  <tr>
    <td>Fornavn</td>
    <td>Efternavn</td>
    <td>Adresse</td>
    <td>Postnr</td>
    <td>Tlfnr</td>
  </tr>
  <tr>
    <td>Per</td>
    <td>Petersen</td>
    <td>Vej 5</td>
    <td>8000</td>
    <td>45654521</td>
  </tr>
</table></div>
</body>
</html>
Avatar billede tri Nybegynder
08. juli 2002 - 10:29 #2
ja nogenlunde sådan, men det opfører sig lidt underligt!

Prøv at trykke på 'visDetaljer' et par gange
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 11:44 #3
Hvad så med den her :

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
    yepDu = false;
    function visDu(hvad,hvadIgenDu){
    if(!yepDu){
    document.getElementById(hvad).style.display="block";
    yepDu = true
        }else{
        document.getElementById(hvad).style.display="none";
        yepDu = false;
        }
    }
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="822*" border="1">
  <tr>
    <td><b>Detaljer</b></td>
    <td><b>Fornavn</b></td>
    <td><b>Efternavn</b></td>
  </tr>
  <tr>
    <td><a href="" onclick="visDu('Petersen');return false" >Vis detaljer</a></td>
    <td>per</td>
    <td>petersen</td>
  </tr>
  <tr>
    <td>Vis detaljer</td>
    <td>hans</td>
    <td>hansen</td>
  </tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<table width="822*" border="1" id="Petersen" style="display:none;">
  <tr>
    <td>Fornavn</td>
    <td>Efternavn</td>
    <td>Adresse</td>
    <td>Postnr</td>
    <td>Tlfnr</td>
  </tr>
  <tr>
    <td>Per</td>
    <td>Petersen</td>
    <td>Vej 5</td>
    <td>8000</td>
    <td>45654521</td>
  </tr>
</table>
</body>
</html>
Avatar billede -master-d- Nybegynder
08. juli 2002 - 13:45 #4
Så sådan her da :

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function visDetaljer(blok){
blokken = document.all[blok]
if (blokken.style.display == 'none'){
blokken.style.display = 'block';
aktiv = 1
} else if(aktiv = 1){
blokken.style.display = 'none';
aktiv = 0
}
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="822*" border="1">
  <tr>
    <td><b>Detaljer</b></td>
    <td><b>Fornavn</b></td>
    <td><b>Efternavn</b></td>
  </tr>
  <tr>
    <td><a href="" onclick="visDetaljer('Petersen');">Vis detaljer</a></td>
    <td>per</td>
    <td>petersen</td>
  </tr>
  <tr>
    <td>Vis detaljer</td>
    <td>hans</td>
    <td>hansen</td>
  </tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="display:none;" id="Petersen"><table width="822*" border="1">
  <tr>
    <td>Fornavn</td>
    <td>Efternavn</td>
    <td>Adresse</td>
    <td>Postnr</td>
    <td>Tlfnr</td>
  </tr>
  <tr>
    <td>Per</td>
    <td>Petersen</td>
    <td>Vej 5</td>
    <td>8000</td>
    <td>45654521</td>
  </tr>
</table></div>
</body>
</html>



Det er egentlig det samme, men det andet var noget rod.
Kan ikke helt se hvad du mener her er der ikke noget i vejen.
Avatar billede =maddog= Nybegynder
08. juli 2002 - 16:51 #5
skal jeg rulle en NS4 kompatibel version ud af ærmet, eller kan det være så aldeles ligemeget?
Avatar billede tri Nybegynder
08. juli 2002 - 16:56 #6
det er fint sådan som det virker nu :-)

Jeg er lige ved at teste, så jeg vender tilbage senere.
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 16:57 #7
Sådan skal det ikke være....

<script language="JavaScript">

    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false
    ie5 =(document.getElementById)? true:false
    ns6 = (document.getElementById && !document.all)?true:false;
    yepDu = false;
   
    function visDu(hvad,hvadIgenDu){
    if(!yepDu){
    teksten = (ns4)? document.layers[hvad] : (ie4)? document.all[hvad].style : document.getElementById(hvad).style;
    teksten.display="block";
    yepDu = true
        }else{
    teksten = (ns4)? document.layers[hvad] : (ie4)? document.all[hvad].style : document.getElementById(hvad).style;
    teksten.display="none";
        yepDu = false;
        }
    }
</script>
Avatar billede =maddog= Nybegynder
08. juli 2002 - 17:01 #8
nikolajdu: display er CSS2 og dutter ikke på NS. Du skal bruge position:absolute;visibility:hidden; men så kører det også bare.
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 17:08 #9
Hov hov nu ikke spille smart. Display:block og display:none findes da i CSS1 og er altså understøttet i NS 4.x - Problemet er så bare her at det er dårligt understøttet *:))

http://www.w3.org/TR/REC-CSS1#display

Fik dig du *GG*

/Nikolaj
Avatar billede =maddog= Nybegynder
08. juli 2002 - 17:20 #10
det var satans. jeg fejrede en lille sejr da jeg slog dig på stregen forleden, men at slå mig på min hjemmebane...
jeg er målløs.
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 17:21 #11
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 17:23 #12
Det link kan du i øvrigt også se at de også foreslår visibility i stedet - Så vi kan jo deles om æren nu :))
Avatar billede nikolajdu Nybegynder
08. juli 2002 - 17:36 #13
Avatar billede =maddog= Nybegynder
08. juli 2002 - 17:43 #14
man kunne sikkert lave mange sjove ting ved at overskrive til der er display:in-line; til display:block;
jeg har brugt det til, f.eks. at lave en lækker lækker roll-over menu i ren CSS. Desværre ændrer fotx alle URL'er til links, men det kunne være sjovt at sætte sådan noget som det her ind
<center><font style="display:block;height:88;width:120;background:url('http://www.dsr.kvl.dk/~maddog/dog.gif');"></font></center>
har prøvet. virker ikke :(.
Avatar billede =maddog= Nybegynder
08. juli 2002 - 18:44 #15
Avatar billede -master-d- Nybegynder
08. juli 2002 - 19:00 #16
=maddog= <-- Ja det er rigtig nok, men syntes bare at det ville være nemmere at udvikle hans eget script der lidt.
Avatar billede =maddog= Nybegynder
08. juli 2002 - 19:03 #17
-master-d-> no pun intended. selvklart. jeg ville ikke mænge mig bare tilbyde min hjælp skulle den være til gavn. Det var der så ikke brug for.
Avatar billede tri Nybegynder
09. juli 2002 - 09:31 #18
takker
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester