Tabellenzeilen per klick anzeigen

[alexgross]

Guten Tag,
ich bräuchte sehr Eure Hilfe, da ich kaum Erfahrung mit JavaScript habe.
ich versuche so zu machen, dass nicht alle tabellenzeile zunächst angezeigt werden. Ich versuche dies mit "visibility" zu errechen. Es gibt ein Beispiel dazu. Da werden aber die Zeilen ersmal angezeigt und danach versteckt. Wie kann ich umgekehrt machen.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility
Danke für Eure Hilfe

[Der-Dennis]

Hallo,

Du kannst auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display verwenden, also ohne Platzhalter. Für das Ausblenden könntest Du dann "none" verwenden, für das einblenden einer Zeile "table-row".

Gruß, Dennis

[Der Martin]

Hi,

Du kannst auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display verwenden, also ohne Platzhalter. Für das Ausblenden könntest Du dann "none" verwenden, für das einblenden einer Zeile "table-row".

für das Wiedereinblenden sollte man besser '' zuweisen, also einen leeren String. Dann gilt wieder die im Stylesheet (ggf. Browser-Defaultstylesheet) vereinbarte Einstellung.

Damit wird's auch kompatibel zu alten IEs, die die Werte table, table-row und table-cell noch nicht kennen (und sonst ersatzweise 'block' bräuchten, was andere Browser wiederum veranlassen würde, Unsinn anzuzeigen).

Ciao,
 Martin

[hossi]

Hi,

also mir kommt da eig. nur ein Gedanke: jQuery

Wie wärs denn mit dieser Lösung?

Sieht recht elegant aus. Sollte das nicht das Richtige sein, google mal nach: jquery accordion

greetz
hossi

[hossi]

Hi,

also mir kommt da eig. nur ein Gedanke: jQuery

Wie wärs denn mit dieser Lösung?

Sieht recht elegant aus. Sollte das nicht das Richtige sein, google mal nach: jquery accordion

greetz
hossi

Sorry, ich vergaß noch diesen Link: klick

[Gunnar Bittersmann]

@@alexgross:

nuqneH

ich versuche so zu machen, dass nicht alle tabellenzeile zunächst angezeigt werden.

Welche denn nicht? Wie unterscheiden die sich von den angezeigten?

Nehmen wir mal an, die 'tr'-Elemente hätten @class="hidden". Dann versteckst du sie nur bei aktiviertem JavaScript folgendermaßen:

Per

<script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code]

weit vorn im Quellcode ('head') verpasst du dem 'html'-Element die Klasse "js" und per Nachfahrenselektor blendenst du aus [PERFORMANCE-BP2]:

.js .hidden { display: none }

Willst du nun später eine Tabellenzeile sichbar machen, dann änderst entfernst du deren Zugehörigkeit zur Klasse "hidden":

foo.className = "";

(wobei foo das entsprechende 'tr'-Elementobjekt ist)

Qapla'