✔ Tabelle per javascript verstecken...brauch dringend hilfe

[Astror Enales]

Moin @all.

Also ich arbeite an einem Forum und der übersichtlichkeit
halber, will ich machen, dass man tabellen (oder noch besser
tabellenteile also <tr>'s) verstecken kann. Dies soll per js
gemacht werden, damit nicht die Seite neu geladen werden
muss.

Hoffe auf baldiege Hilfe.

Gruß
Astror Enals

 

[Gumbo]

Und wobei genau brauchst du nun Hilfe?

 

[Astror Enales]

Ja bei eben genau diesem....Wie mache ich das?
sry, wenn ich mich nicht deutlich genung ausgedrückt hab.

 

[Biergamasda]

schon mal dran gedacht, per JS den <tr> Teil aus der Tabelle zu nehmen und in eine Versteckte wieder einzubauen?

Das würde mir jetzt halt spontan einfallen, kann sein dass es auch bessere Lösungen gibt

lg

 

[Astror Enales]

Aber wie mache ich das?

Ich habe es jetzt schon geschaft, die Tabelle zu verstecken, doch dann is da ein leeres feld
und der untere Teil will net aufrücken
Hier der Code:

<META http-equiv=expires content=0><LINK media=all href="./images/nno.css" type=text/css rel=stylesheet>
<SCRIPT src="./images/script.js" type=text/javascript></SCRIPT></HEAD>



<A onclick="javascript:hide(menu01); austausch1.src='./images/plus.png'"><img src="./images/minus.png" alt="minimieren" border="0" name="austausch1"></a>
<DIV id=menu01 onclick=javascript:hide(menu01);>
<div class=quickmenue>
<table valign=top bordercolor=black border=1 width=100%>
<tr>
<td background=./images/bgnavioben.jpg valign=top>
<li>
1. Forum 1
</li><li>
2. Forum 2
</li><li>
3. Forum 2
</li>
</td>
</tr>
</table>
</DIV></A></div>

<A onclick="javascript:hide(menu02); austausch2.src='./images/plus.png'"><img src="./images/minus.png" alt="minimieren" border="0" name="austausch2"></a>
<DIV id=menu02 onclick=javascript:hide(menu02);>
<div class=quickmenue>
<table valign=top bordercolor=black border=1 width=100%>
<tr>
<td background=./images/bgnavioben.jpg valign=top>
<li>
1. Forum 1
</li><li>
2. Forum 2
</li><li>
3. Forum 2
</li>
</td>
</tr>
</table>
</DIV></A></div>

Weiß wer, wie man macht, dass der untere Teil dann aufrückt

 

[Maik]

Tausche doch die Werte block und none der display-Eigenschaft.

 

[Astror Enales]

Wie meinst du das?

Kannst du das genauer erklären?
Ich habe doch nirgends was von block oder none bzw. display geschrieben?

 

[Maik]

Mit der display-Eigenschaft lässt sich die Anzeigeart bzw. Nichtanzeige ohne Platzhalter eines Elements regeln.

Der Wert none zeigt das Element nicht an und reserviert auch keinen Platzhalter im Textfluss, womit der nachfolgende Inhalt beim Ausblenden des Elements nach oben aufrückt / wandert.

Hier mal ein Beispiel, basierend auf deinem HTML-Code:

function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}

<a href="#" onclick="ShowHide('menu01'); austausch1.src='./images/plus.png'" style="display:block;"><img src="./images/minus.png" alt="minimieren" border="0" name="austausch1"></a>
   <div id="menu01" style="display:block;">
   <div class="quickmenue">
        <table valign="top" bordercolor="black" border="1" width="100%">
               <tr>
                   <td background="./images/bgnavioben.jpg" valign="top">
                       <ul>
                           <li>1. Forum 1</li>
                           <li>2. Forum 2</li>
                           <li>3. Forum 2</li>
                       </ul>
                   </td>
               </tr>
        </table>
   </div>
   </div>

<a href="#" onclick="ShowHide('menu02'); austausch2.src='./images/plus.png'" style="display:block;"><img src="./images/minus.png" alt="minimieren" border="0" name="austausch2"></a>
   <div id="menu02" style="display:block;">
   <div class="quickmenue">
        <table valign="top" bordercolor="black" border="1" width="100%">
               <tr>
                   <td background="./images/bgnavioben.jpg" valign="top">
                       <ul>
                           <li>1. Forum 1</li>
                           <li>2. Forum 2</li>
                           <li>3. Forum 2</li>
                       </ul>
                   </td>
               </tr>
        </table>
   </div>
   </div>

 

[Astror Enales]

hm...so wie du den quelltest geschrieben hast, gings immer noch nicht,
aber nah ausprobieren, habe ich das hinbekommn.

<a href="#" onclick="javascript:hide('menu01'); austausch1.src='./images/plus.png'" style="display:block;">
<img src="./images/minus.png" alt="minimieren" border="0" name="austausch1"></a> 
<div id="menu01" style="display:block;"> 
<div class="quickmenue"> 
<table valign="top" border="1" width="100%"> 
<tr>
<td valign="top"> 
<ul> 
<li>1. Forum 1</li> 
<li>2. Forum 2</li> 
<li>3. Forum 2</li> 
</ul> 
</td>
</tr> 
</table> 
</div> 
</div>

und hier ein teil im .js-dokument:

function show (elementvariable) {
  if (document.getElementById)
    document.getElementById(elementvariable).style.visibility = "visible";
    document.getElementById(elementvariable).style.display = "block";
}
function hide (elementvariable) {
  if (document.getElementById)
    document.getElementById(elementvariable).style.visibility = "hidden";
    document.getElementById(elementvariable).style.display = "none";
}

Danke für eure schnellen antworten.
Sache ist erledigt
THX

 

[Maik]

hm...so wie du den quelltest geschrieben hast, gings immer noch nicht

Ich weiß jetzt nicht, wie du mein Script-Beispiel in deinem Dokuemt eingebunden hast, und ob du die Funktion ShowHide('ID-Name') zum Aus- und Einblenden verwendet hast, aber bei mir funktioniert es einwandfrei.