kinyíló, becsukódó táblázatok


Ha különböző adatokat tartalmazó táblákat szeretnék kinyíló, bezáródó effekttel ellátni, használd az alábbi kódot (expand, collapse effect)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<style type="text/CSS">
   table {
          width:100%; 
          border-collapse:collapse;
          border:2px solid silver;
         }
   tbody {
          display:block
         }
   th {
       font-weight:normal;
       text-align:left;
      }
   td {
       text-align:center;
       padding:8px;
       border:1px solid silver; }
   .linkspan {
              color:gold;
              background-color:blue;
              font-weight:bold;
              text-decoration:none;
              padding:0 2px; 
              font-size:1.2em;
              margin:right:3px;
             }
   .vis {
         display:block;
        }
</style> 
 
<script type="text/javascript"> 
   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }
 
   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>
</head> 
<body> 
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" 
      onclick="showHide('fruit','fruitspan')">
        <span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr>
   </thead> 
   <tbody id="fruit">
      <tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr>
      <tr> <td> Pear</td><td> Green</td><td> Firm</td></tr>
      <tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')">
        <span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr> 
   </thead>
   <tbody id="vegtable">
      <tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr>
      <tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr>
      <tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')">
        <span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr>
   </thead> 
   <tbody id="animal">
      <tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr>
      <tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr>
      <tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr>
   </tbody>
</table> 
</body> 
</html>
Kapcsolódó bejegyzések:

A cikket beküldte: Harder (http://blog.harder.hu)

7 hozzászólás

  1. Atman says:

    Szia!

    Kipróbáltam mozilla alatt és a tbody mérete csak nő, amikor becsukom akkor nem áll vissza az eredeti állapot…

  2. Harder says:

    Hm.. nálam is, pedig anno ez jó volt FF alatt is. :(

  3. Atman says:

    Szia!

    Módosítás. Nem a tbody nő hanem a table mérete nő minden kinyitás alkalmával tbody mérettel, mindez IE6 alatt nem tapasztalható. Eddig pont fordítva tapasztaltam hibákat, tehát ami mőködött mozilla alatt az nem IE6 alatt. :-)
    Ez csúnya dolog mozilla bácsi részéről. :-) Most először csalódtam benne igaz csak egy kicsit. De ezze is megvan a megoldás csak kicsit másképp (mozillásan kell gondolkodni. :-) ) Komplett table-ket el tud tüntetni, ha gondolod akkor közzé teszem a megoldást mozilla kérdésre csak mond meg hogy kell… ;-)

  4. zoleytaylor says:

    nem működik jól, mert nem a display-t kell váltani, hanem a visibility-t… szerintem (bár csak a legutóbbi kommentet olvastam meg utána kb 10 másodpercig a kódot)… vagy esetleg ugyanezt, csak a display-váltós táblába kell tenni egy másik táblát, aminek ugyanarra az akcióra a visibility-je változik. ekkor összehúzódik a tábla, mert nincs benne tartalom…

  5. Lhara says:

    Nah mégegyszer:

    Szal így nekem megy mindkét böngészőben:

    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    
    	table, td{
    		border: 1px black solid;
    		width: 200px;
    		margin: 20px;
    	}
    	table{
    		background-color: lightblue;
    	}
     
     
    	function showHide(id){
    		var latszik = document.getElementById(id).style.display;
    		if(latszik == 'block'){
    			document.getElementById(id).style.display = 'none';
    			document.getElementById(id + 'span').innerHTML = '+';
    		}else{
    			document.getElementById(id).style.display = 'block';
    			document.getElementById(id + 'span').innerHTML = '-';
    		}
    	} 
     
        <a href="#" rel="nofollow">
             +  Fruit:</a>
     
            Apple Red Shiny
            Pear Green Firm
            Banana Red Shiny
     
        <a href="#" rel="nofollow">
             +  Vegtable:</a> 
     
            Carrot Orange Crisp
            Cucumber Green Delicious
            Cauliflower White Firm
     
        <a href="#" rel="nofollow">
             +  Animal:</a>
     
            Cat Calico Lazy
            Dog Retriever Golden
            Badger Muddy Mean
  6. Lhara says:

    Mégsem jó :( Ennél is növekszik a th alatti hely Mozillában.
    De fura! Valaki tudja, hogy miért csinálja ezt? Engem érdekelne az a táblázat-eltüntetős megoldás. Táblázatban a táblázatra gondolsz?

  7. ViZion says:

    Lhara:
    1. normálisan (bár gyanús a nofollow) beszúrta a scripted, tehát tutira csak engem utál a wp.
    2. a becsukódó tartalmak egy oldalon belül című cikkben szereplő megoldás table-val is működik, esetleg kombináld a kettőt…

Szólj hozzá
a kinyíló, becsukódó táblázatok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>