Tabellenzeilen ein- bzw. ausblenden

[minor73]

Hallo an alle,
ich habe schon in eineigen Beiträgen gelsesen das es möglich ist eine Tabellenzeile via Javascript ein- bzw. auszublenden.
habe das auch versucht und es geht auch einwandfrei mittels :

document.getElementById(2).style.display = 'none';
bzw.
document.getElementById(2).style.display = 'block';

Ich bräuchte jetzt aber eine Steigerung, ich möchte mehrere Zeilen ein- bzw. ausblenden, nur kann ja nur eine Zeile die gleiche id haben und nicht mehrere.
Hat von euch jemand eine Idee wie das gehen könnte?

Wäre super

Danke

Gruß
Andreas

[Peter Pan]

Hi!

Ich bräuchte jetzt aber eine Steigerung, ich möchte mehrere Zeilen ein- bzw. ausblenden, nur kann ja nur eine Zeile die gleiche id haben und nicht mehrere.
Hat von euch jemand eine Idee wie das gehen könnte?

Du brauchst die Möglichkeit, mehrere Elemente zu selektieren - z.B. über eine Klasse. Nach welchen Kriterien möchtest Du denn ein- und ausblenden?

off:PP

[minor73]

hallo,
ich möchte auf Grund eines Click Events (z.B. auf eine Grafik) die Tabellenzeilen ein- bzw. ausblenden.

im Prinzip schreibe ich eine große Tabelle mit x Zeilen und 15 Spalten.
Die erste Zeile ist dabei die Blcoküberschrift dar, in diesem Fall das Projekt, die darauf folgenden Zeilen sind die Aufgaben zu diesem Projekt, dargestellt in dem ich einfach in Spalte 2 anfange, mit entsprechender Gesaltung siht das dann wie eine Gruppendarstellung aus.
Dann kommt wieder Projekt und danach die Aufgaben ... usw.
nun möchte ich eben die Zeilen mit den Aufgaben darunter ein- bzw. ausblenden, und das eben durch einen Click auf ein Ordnersymbiol oder ähnliches.

Hmm hoff ich hab nicht zu wirr geschrieben.

:-)

Gruß
Andreas

Hi!

Ich bräuchte jetzt aber eine Steigerung, ich möchte mehrere Zeilen ein- bzw. ausblenden, nur kann ja nur eine Zeile die gleiche id haben und nicht mehrere.
Hat von euch jemand eine Idee wie das gehen könnte?

Du brauchst die Möglichkeit, mehrere Elemente zu selektieren - z.B. über eine Klasse. Nach welchen Kriterien möchtest Du denn ein- und ausblenden?

off:PP

[Struppi]

nun möchte ich eben die Zeilen mit den Aufgaben darunter ein- bzw. ausblenden, und das eben durch einen Click auf ein Ordnersymbiol oder ähnliches.

Du meinst sowas?

Struppi.

[Gunnar Bittersmann]

@@minor73:

nuqneH

Die erste Zeile ist dabei die Blcoküberschrift dar, in diesem Fall das Projekt, die darauf folgenden Zeilen sind die Aufgaben zu diesem Projekt, dargestellt in dem ich einfach in Spalte 2 anfange, mit entsprechender Gesaltung siht das dann wie eine Gruppendarstellung aus.
Dann kommt wieder Projekt und danach die Aufgaben ... usw.

Hört sich so an, dass das Markup so aussehen sollte:

<table>  
  <tbody id="projekt1">  
    <tr><th>…</th> …</tr>  
    <tr><td>…</td> …</tr>  
    <tr><td>…</td> …</tr>  
    ⋮  
  </tbody>  
  <tbody id="projekt2" class="compact">  
    <tr><th>…</th> …</tr>  
    <tr><td>…</td> …</tr>  
    <tr><td>…</td> …</tr>  
    ⋮  
  </tbody>  
  ⋮  
</table>

Im Stylesheet versteckst du alle Tabellenzeilen in 'tbody'-Elementen der Klasse "compact":

tbody.compact tr:not(:first-child) { display: none }

Schön wär’s gewesen. Nur das der IE selbst in der 8er Version mit :not() seine Not hat. Also als Zweizeiler:

tbody.compact tr { display: none }  
  
tbody.compact tr:first-child { display: table-row }

Für IE 7 zusätzlich:

  
*+html tbody.compact tr:first-child { display: block }

IE 6 ist hoffentlich irrelevant. Aber es sollte alles eingeblendet sein:

* html tbody.compact tr { display: block }

nun möchte ich eben die Zeilen mit den Aufgaben darunter ein- bzw. ausblenden, und das eben durch einen Click auf ein Ordnersymbiol oder ähnliches.

Dann ändere die Klassenzugehörigkeit des jeweiligen 'tbody'-Elements auf "" bzw. "compact".

Hmm hoff ich hab nicht zu wirr geschrieben.

Doch, hast du. Die Leserichtung ist in unserem Kulturkreis von oben nach unten; die Schreibrichtung sollte genauso sein. Kein TOFU!

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Für IE 7 zusätzlich:
*+html tbody.compact tr:first-child { display: block }

IE 6 ist hoffentlich irrelevant.

Falls nicht:

* html tbody.compact tr.first-child { display: block }

Dazu jeder ersten Tabellenzeile in jedem 'tbody' die Klasse "fist-child" verpassen – natürlich nicht im Markup, sondern per JavaScript; und das muss auch nicht für alle Browser sein, sondern nur für IE < 7. Kann man per CSS-Expression tun:

* html tbody { display: expression( [code lang=javascript](new Function('el', '\  
[code lang=javascript]  el.firstChild.className += " first-child";\  
  el.style.display = "block";

'))(this) )[/code] }[/code]

Aber es sollte alles eingeblendet sein:

Und das sollte es auch, wenn JavaScript nicht ausgeführt wird. Per
  <script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code]
dem 'html'-Element die Klasse "js" verpassen und per Nachfahrenselektor ausblenden  [PERFORMANCE-BP2]:

.js tbody.compact tr  { display: none }  
  
.js tbody.compact tr:first-child { display: table-row }  
  
*+html.js tbody.compact tr:first-child { display: block }  
  
* html.js tbody.compact tr.first-child { display: block }  
  
* html.js tbody { display: expression( [code lang=javascript](new Function('el', '[code lang=javascript]el.firstChild.className += " first-child"; el.style.display = "block";
~~~'))(this)[/code] ) }[/code]  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[Gunnar Bittersmann]

@@minor73:

nuqneH

Hallo an alle,
ich habe schon in eineigen Beiträgen gelsesen das es möglich ist eine Tabellenzeile via Javascript ein- bzw. auszublenden.
habe das auch versucht und es geht auch einwandfrei mittels :

document.getElementById(2).style.display = 'none';
bzw.
document.getElementById(2).style.display = 'block';

Du testest im nur IE? Das ist grundverkehrt. Teste in standardkonformen Browsern! Danach testest du im IE, um ggfs. notwendige Anpassungen zu ergänzen.

Von „geht auch einwandfrei“ kann bei deinem Code keine Rede sein. Die 'display'-Eigenschaft einer Tabellenzeile auf "block" zu setzen ist falsch; damit zerhaust du die Tabelle.

Der richtige Wert wäre "table-row", den versteht zwar der IE < 8 nicht, wendet dann aber seinen Defaultwert ("block") an und stellt die Tabellenzeile dar.

Du kannst aber auch für alle Browser ihren Defaultwert per Leerstring angeben: ….style.display = "";

Die drei Punkte sind gewollt, denn document.getElementById(2) ist falsch; solch eine ID "2" darf es gar nicht geben [in: HTML401 §6.2] Wenn es doch funktionier, dann dank der Fehlerkorrektur der (einiger?) Browser. Verlassen sollte man sich nicht darauf.

Ich bräuchte jetzt aber eine Steigerung, ich möchte mehrere Zeilen ein- bzw. ausblenden, nur kann ja nur eine Zeile die gleiche id haben und nicht mehrere.

Diese Zeilen haben also etwas Gemeinsames, was sich durch die Zugehörigkeit zur selben Klasse ausdrücken lässt.

Die Umschaltung der Sichtbarkeit erfolgt sinnvollerweise per Änderung der Klasse eines Vorfahrenelements ('table' dürfte sich anbieten) und CSS-Nachfahrenselektor:

Markup:

<table class="hide-foo">  
  <tr class="foo">…</tr>  
  <tr class="foo">…</tr>  
  <tr class="bar">…</tr>  
  <tr class="bar">…</tr>  
</table>

Stylesheet:
.hide-foo .foo, .hide-bar .bar { display: none }

Die Tabellenzeilen der Klasse "foo" werden nicht angezeigt. Wird nun mit JavaScript die Klasse der Tabelle auf "hide-bar" geändert, werden die Tabellenzeilen der Klasse "foo" angezeigt; die Tabellenzeilen der Klasse "bar" jedoch nicht mehr.

Qapla'