Avatar billede Slettet bruger
23. marts 2007 - 21:09 Der er 4 kommentarer og
1 løsning

Funktion til skjul af celler

Hej!

Jeg har inde i min <table> dette:

<tr> 
  <td id="box11" style="display: none;">blah</td>
</tr>
  <td id="box12" style="display: none;">blah</td>
</tr>
<tr>
  <td id="box13" style="display: none;">blah</td>
</tr>
<tr>
  <td id="box14" style="display: none;">blah</td>
</tr>

De starter altså med IKKE at blive vist - Lige over dem har jeg en anden, med en onClick

<tr>
  <td onClick="toggleBox1">blah</td>
</tr>

toggleBox1 er en funktion jeg har prøvet på at lave, den ser således ud:

function toggleBox1(){
  var box11 = document.getElementById('box11');
  var box12 = document.getElementById('box12');
  var box13 = document.getElementById('box13');
  var box14 = document.getElementById('box14');
  var show = 'no';
   
  if(show == 'no'){
      box11.style.display='block';
      box12.style.display='block';
      box13.style.display='block';
      box14.style.display='block';

      var show = 'yes';
  }
}

Nu er jeg overhovedet ikke JavaScript guru eller noget som helst, men hvad gør jeg forkert - og hvordan skal det se ud?

Med Venlig Hilsen
Rapsac
Avatar billede crazysnap Seniormester
24. marts 2007 - 01:01 #1
Hej rapsac,


Jeg går udfra du gerne vil have at dine celler dukker op når du klikker på 'blah' cellen. For at dette kan ske skal du bare ændre:


<td onClick="toggleBox1">blah</td>


til


<td onClick="toggleBox1();">blah</td>


Du mangler desuden en '<tr>' tag for cellen omsluttende 'box12'. :)


Hvis du også gerne vil skjule cellerne igen når der klikkes på 'blah' igen forslår jeg at du ændrer dit javascript til følgende (jeg har indsat hele siden som eksempel for at gøre det nemt for dig). :)


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script type="text/JavaScript">
        var show = true;
       
        function toggleBox1()
        {
            var box11 = document.getElementById('box11');
            var box12 = document.getElementById('box12');
            var box13 = document.getElementById('box13');
            var box14 = document.getElementById('box14');
   
            box11.style.display= show ? 'block' : 'none';
            box12.style.display= show ? 'block' : 'none';
            box13.style.display= show ? 'block' : 'none';
            box14.style.display= show ? 'block' : 'none';
            show = !show;
        }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td onClick="toggleBox1();" style="cursor: pointer">blah</td>
            </tr>
            <tr> 
                <td id="box11" style="display: none;">blah</td>
            </tr>
            <tr>
                <td id="box12" style="display: none;">blah</td>
            </tr>
            <tr>
                <td id="box13" style="display: none;">blah</td>
            </tr>
            <tr>
                <td id="box14" style="display: none;">blah</td>
            </tr>
        </table>
    </body>
</html>



Håber det var det du søgte! :)

Mvh.

- Snap
Avatar billede Slettet bruger
24. marts 2007 - 08:44 #2
Jo tak det er præcis det - Der er bare lige en lille skrøne!
De starter jo ud med ikke at vises

1. klik: De vises normalt
2. klik: Cellerne er der men teksten forsvinder
3. klik: Teksten bliver mærkelig :P

http://captiva.rapsac.net/?act=project&projectID=1
Avatar billede crazysnap Seniormester
24. marts 2007 - 12:32 #3
Hej rapsac!

Først tak for pointene. :) Og glad for vi er på vej i den rette retning. Nu ved jeg jo ikke helt præcis hvad det er du ønsker, men hvis du 'bare' skal vise og gemme forskellige grupperede elementer foreslår jeg en lille omstrukturering af scriptet.

Jeg har proppet det der skal vises/gemmes ind i en <div>-tag (giver stor frihed) som så er den som gemmes/vises når der klikkes. Javascript-metoden er ændret så den bare skal have id'et på den <div>-tag som skal gemmes/vises ind som argument, på den måde kan du have mange forskellige <div>-tags på samme side og bruge den samme javascript metode til at gemme/vise dem.

Hvis det stadig ikke er en sådan funktionalitet du ønsker må du lige uddybe lidt nærmere! :)


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script type="text/JavaScript">       
        function toggleBox(elmId)
        {
            var elm = document.getElementById(elmId);
           
            if(elm.style.display == "") elm.style.display = 'block';
   
            elm.style.display = (elm.style.display == 'block') ? 'none' : 'block';
        }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td onClick="toggleBox('showHide');" style="cursor: pointer; border: solid 1px gray;">Click here to hide/show</td>
            </tr>
            <tr>
                <td>
                    <div id="showHide" style="border: solid 1px blue;">
                        <table>
                            <tr> 
                                <td id="box11">blah1</td>
                            </tr>
                            <tr>
                                <td id="box12">blah2</td>
                            </tr>
                            <tr>
                                <td id="box13">blah3</td>
                          </tr>
                            <tr>
                                <td id="box14">blah4</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>


Mvh.

- Snap :)
Avatar billede Slettet bruger
25. marts 2007 - 16:49 #4
Takker!
Avatar billede roenving Novice
25. marts 2007 - 23:07 #5
Husk, at skal man have den slags til at virke ens over browserne, skal man også tage hensyn til, at nogle browsere faktisk respekterer w3cs rekommendationer omkring hvilken display-type en tabelcelle bør have ...

-- så der skal browser-detektering til, og så skal de fleste andre browsere end IE stilles til, at display skal være table-cell !-)
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