bei klicken auf Grafik tabelle öffnen

[Fredmonster]

hallo! Wie schaffe ich es, eine tabelle beim klicken auf eine Grafik zu öffnen und bei erneutem klicken wieder zu schließen? ich weiß nicht, ob das hier reingehört oder in javascript..

Moved: JavaScript und DHTML - Nicht mit HTML realisierbar (Artemis)

 

[Artemis]

Dafür solltest du der Tabelle eine eindeutige id zuweisen.
Dann kannst du das Objekt per

document.getElementById("idname")

erreichen.

Du musst dann beim Bild mit dem Eventhandler onclick das Anzeigen der Tabelle ein und ausschalten.

 

[Commodore]

hier mal n einfaches beispiel:

<script type="text/javascript">
var zeige = true;
function verschwinden(){
if(zeige){
zeige = false;
document.getElementById('tabelle').style.display = 'none';
} else {
zeige = true;
document.getElementById('tabelle').style.display = '';
}
}
</script>

dabei gibst du der tabelle die id"tabelle" und in den tag der grafik schreibst du

onClick="verschwinden()"

wenn du das mit mehreren tabellen machen willst, und mehreren bildern dann musst du die id in der funktion übergeben.

 

[Fredmonster]

kann man das ganze auch mit anzeigen machne also das die tabellen erst angezeigt werden bei klicken auf die grafik??

 

[Artemis]

Ja,

füg bei den Tabellen folgendes Attribut hinzu: style="display:none;" und setze die Variable zeige am Anfang auf false und nicht auf true.

 

[Fredmonster]

Hallo! Ich habe die Seite jetzt gemacht und es klappt auch alles soweit! Nur eine Frage.. wie schafe ich es, dass sich unter der ersten tabelle (erstellen/löschen) noch eine 2. öffnet.. also beim draufklicken sollen 2 Tabellen erscheinen!!
(bitte nicht valide-Prüfungen schicken.. die Seite ist grade im aufbau und habe noch nicht viel nach valide geguckt.. ;) )
Hier die url: http://pinboard.pi.funpic.de

 

[Commodore]

also am einfachsten wäre es, wenn du in die bereits bestehende tabelle die beiden anderen reinmachen würdest. oder wenn du den javascript-teil verändern willst, dann soll das so aussehen:

<script type="text/javascript"> 
var zeige = false; 
function verschwinden(){ 
if(zeige){ 
zeige = false; 
document.getElementById('tabelle').style.display = 'none'; 
document.getElementById('tabelle2').style.display = 'none';
} else { 
zeige = true; 
document.getElementById('tabelle').style.display = ''; 
document.getElementById('tabelle2').style.display = '';
} 
}
</script>

jetzt hat die andere abelle die id "tabelle2". übrigens ist es besser eien div zu machen, und in diesem div andere verschachtelte divs reinzupacken, aber das ist ein anderes thema ;) tabellen sollte man nicht benutzen.

wenn du viele von den tabellen machst, dann kannst du auch alle ids in einem array speichern, und dann mit einer for-schleife alle abfragen:

document.getElementById(tabelle[a]).style.display = '';

dabei würde a hochgezählt werden. wenne dich mit javascript auskennst kannste das auch selber hinkriegen ;)

nebenbei: du solltest bei dem code, den ich geschrieben habe erst auf den zitat-button klicken, un dann dort den code rauskopieren. dann wird es für andere einfacher, wenn sie dir später einmal helfen wollen, weil der code dann nciht komplett in einer zeile ist.

 

[Fredmonster]

sorry, wegen meinen tausend Fragen, aber hier die nächste:
http://pinboard.pi.funpic.de
wie mache ich einen Link, mit dem sich alle tabellen öffnen bzw. schließen?

 

[Artemis]

Seite ist nicht verfügbar (404).

 

[Fredmonster]

jetzt stimmts.. ;)

 

[Commodore]

das geht entweder so, dass du in die funktion immer das ganze zeugs mit dem document.getElementById schreibst und dann zu jeder tabelle eine id reinnimmst, doer du schreibst document.getElementsByTagName('table').style etc., aber dann darfste auf der seite keine andere tabelle mehr benutzen.

 

[Fredmonster]

aber wie mache ich das bei einem link.. also ich wills mit nem Textlink machen, nicht mit nem Bild.. da kann ich ja nch onClick nehmen..

 

[Commodore]

doch, das kannste da benutzen ;) http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick

und wenn du es nicht benutzen willt:

<a href="javascript:hierdiefunktion()">javascript</a>

 

[Fredmonster]

ja.. soryy.. blöde Frage.. unüberlegt.. ;)