✔ Tabellen unsichtbar machen

K

kellykatz

Grünschnabel
Hallo,

mein Problem ist Folgendes: Ich möchte, dass bei einem Klick auf einen Link eine Tabelle sichtbar wird. Dabei hab ich 12 verschiedene Tabellen mit den entsprechenden Links. Die Tabellen sind mit Id=tabelle1, tabelle 2 usw gekennzeichnet, sodass ich in der Aufforderung zur Funktion nur noch die Zahl der entsprechenden id angeben muss. Die Tabellen an sich befinden sich in einem Div-Kontainer. Dass sie sichtbar werden, klappt wunderbar.

Nur muss ich auch sichergehen, dass bei einem Klick auf einen anderen Link eine bereits sichtbare Tabelle verschwindet und Platz für die neue macht. Da hab ich mir überlegt eine Schleife zu basteln, die einfach alle Tabellen auf display:none setzt und danach die eigentliche wieder sichtbar. Doch anscheindend ist dies nicht der richtige weg, denn jetzt wird bei einem KLick nicht einmal mehr die Tabelle sichtbar.

hier mal der JS Code:

Code: 
function tabelle_an(id){
for (var i = 1; i <= 12; i++)
	document.getElementById("tabelle"+i).style.display="none";
document.getElementById("tabelle"+id).style.display="block";
}

und hier der HTML Code (ein Beispiellink mit Tabelle sollten reichen):

Code: 
<a href="#" onclick="tabelle_an(2)">Digital</a><br />

<table class="gallery" cellpadding="0" cellspacing="3px" border="1px" id="tabelle2" style="display:none;">
      <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/1.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_1.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg'" /></a>

       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/2.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_2.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg'" /></a>
       </td>
       
       <td>   
        <a href="inhalte/galerie/bilder/charis/Digital/bilder/3.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_3.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg'" /></a>
       </td>
      </tr>
       
        <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/4.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_4.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg'" /></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_5.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg'" /></a>
       </td>
       
       <td> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_6.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg'"/>  
       </td>
       </tr>
       
       <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/7.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_7.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg'"/></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/8.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_8.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg'" />
       </td>
       
       <td> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/9.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_9.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg'" /></a>
       </td>
       </tr>
       
       <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/10.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_10.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg'" /></a>
       </td>
       
       <td>
       </td>
       
       <td> 

       </td>
       </tr>
       
     </table>

Ich bedanke mich im Voraus für die Hilfe :)

Kelly
 
Ich weiß es gerade nicht, ab es könnte daran liegen, dass du einen Integer (i) in der Schleife mit einem String "addierst".
Probier mal die Funktion toString():
HTML: 
document.getElementById("tabelle"+i.toString()).style.display = "";
 
Bist du Dir sicher, das getElementById immer auch ein Element zurückliefert? (Zur Not in die JS-Konsole schauen -> STRG + SHIFT + J im Firefox z.B. und nach Fehlern Ausschau halten)

Kannst ja mal folgendes probieren:

Code: 
function tabelle_an(id){
for (var i = 1; i <= 12; i++) {
  if (document.getElementById("tabelle"+i))
    document.getElementById("tabelle"+i).style.display="none";
}
if(document.getElementById("tabelle"+id))
  document.getElementById("tabelle"+id).style.display="block";
}

Dadurch ist sichergestellt, dass immer ein Objekt existiert.
 
Cooll! es klappt!

Mit dem Interger kann ich mir nicht vorstellen, dass es da Probleme gab, denn so hab ich es auch bei vielen anderen Funktionen gemacht.

@Tomek_FFM: Danke! Jetzt geht es wunderbar! Mich würde nur interessieren, wie es kommt, dass es mit einer If-Clause klappt. Is echt verrückt :)

Danke für die Antworten!

Kelly
 
Wie Tomek schon geschrieben hat: es wird sichergestellt das das Element, dessen Style du ändern möchtest, auch vorhanden ist. Ansonsten wirft JavaScript einen Fehler und macht nicht mehr weiter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück