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>
Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

7 HOZZÁSZÓLÁS

  1. Szia!

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

  3. 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. 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. 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. 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. 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…

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét