zeilen und spalten einer tabelle ein- und ausblenden lassen

[Roger]

moin!

ich möchte eine tabelle darstellen. der übersichtlichkeit halber, würde ich gern den user diverse zeilen und spalten ausblenden lassen. kann man sowas bewerkstelligen? (muss ja keine tabelle sein, nur die tabellarische übersicht muss erhalten bleiben.)
wie gehe ich da am besten vor?

gruß.
roger.

[berdn]

Hallo Roger,

ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

Liebe Grüße,

Bernd

[Roger]

moin!

ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?

gruß.
roger.

[berdn]

Hallo Roger,

ausprobieren ;-)

Weise jedem TR und jedem TD eine Klasse zu.

<tr class="reihe1">
<td class="spalte1"></td>
<td class="spalte2"></td>
<td class="spalte3"></td>
<td class="spalte4"></td>
</tr>
<tr class="reihe2">

Dann baust Du noch eine Schleife in dem Du nach dem Objekt mit der gewünschten Klasse suchst, und dann via JS die CSS Eigenschaft änderst.

Ich habe es jetzt nicht ausprobiert, ist schließlich Dein projekt ;-)

Müßte aber klappen.

Liebe Grüße,

Bernd

[Gunnar Bittersmann]

Hello out there!

Weise jedem TR und jedem TD eine Klasse zu.

Nein, du möchtest die Tabellenzeilen nicht klassifizieren, sondern identifizieren:

<table>  
  <col id="col0" />  
  <colgroup>  
    <col id="col1" />  
    <col id="col2" />  
  </colgroup>  
  <thead>  
    <tr id="row0">  
      <th>00</th>  
      <th>01</th>  
      <th>02</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr id="row1">  
      <th>10</th>  
      <td>11</td>  
      <td>12</td>  
    </tr>  
    <tr id="row2">  
      <th>20</th>  
      <td>21</td>  
      <td>22</td>  
    </tr>  
  </tbody>  
</table>

Der IE versteht es, Tabellenspalten über das col-Element auszublenden:
#col1 {display: none}

Firefox lässt sich davon nicht beeindrucken, kennt aber den Nachbarschaftsselektor und Pseudoklassen:
th:first-child+th, th:first-child+td {display: none}

Mit der Kombination
#col1, th:first-child+th, th:first-child+td {display: none}
sollten wohl alle CSS-interpretierenden UAs die Spalte ausblenden.

Bei Zeilen gibt es keine Probleme:
#row1 {display: none}

See ya up the road,
Gunnar

[Roger]

moin!

wow, super erklärt. so hab ich es auch geschnallt. ich fummel mal. danke!

gruß.
roger.

[Roger]

moin!

ich hab mich grad nochmal etwas genauer mit der sache beschäftigt. und habe da noch ein paar fragen:

wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)
genügt ein display: block um die spalte/zeile wieder anzuzeigen?

gruß.
roger.

[Cybaer]

Hi,

wie kann ich das ein-/ausblenden per klick erreichen?

Mit CSS? Gar nicht.

Dafür braucht's ...

(mit document.getElementsById[...].style?

... JavaScript.

Und es gibt mehrere Möglichkeiten ...

... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)

Gruß, Cybaer

[Roger]

moin!

... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)

selber schuld, wenn ich ihn jetzt nerve? :)

gruß.
roger.

[Cybaer]

Hi,

... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)
selber schuld, wenn ich ihn jetzt nerve? :)

So sehe ich das! >;-)

Aber dir wird auf jeden Fall geholfen - muscht vielleicht nur a bissel warten ... 8-)

Gruß, Cybaer

[Cybaer]

Hi,

wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)

Du kannst den CSS-Code selbst ändern (s. Coding: CSS-Regeln auslesen & ändern).

Direkt: Wenn z.B.

#col1, th:first-child+th, th:first-child+td {display: none}

die 1. Regel des 1. Stylesheets ist, dann kann man mit document.styleSheets[0].rules[0].style.cssText im IE bzw. mit document.styleSheets[0].cssRules[0].style.cssText im Rest der dies unterstützenden Browserwelt den CSS-Text auswechseln.

Eine von mehreren Lösungsmöglichkeiten.

Gruß, Cybaer

[Cybaer]

Ähm,

#col1, th:first-child+th, th:first-child+td {display: none}

da das ein Gruppen-Selektor ist, sind allerdings noch ein paar Unterschiede zw. den Browsern zu beachten. =;-)

Also sinnvollerweise sollte man das auf 2 Regeln aufteilen:
1. #col1 {display: none}
2. th:first-child+th, th:first-child+td {display: none}

Gruß, Cybaer

[berdn]

Hallo Gunnar, hallo DeWitt,

man lernt immer noch dazu ;-)

Aber Gunnar, was ist denn:

<col id="col0" />

Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.

Liebe Grüße aus dem F'hain,

Bernd

[Gunnar Bittersmann]

Hello out there!

Aber Gunnar, was ist denn:
<col id="col0" />

Eine Spalte?

Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.

Was ist dir neu? Dass colgroups cols beinhalten oder dass col auch ohne colgroup stehen kann?

DTD XHTML 1.0 Strict:

<!ELEMENT table  
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

Liebe Grüße aus dem F'hain,

Äh, dito. (Nähe Samariterkirche)

See ya up the road,
Gunnar

[berdn]

Hallo Gunnar,

eine colgroup dient also dazu, mehrere Spalten inhaltlich zu zuordnen.

Na, dann kann natürlich eine Spalte (col) auch alleine stehen.

D.h. ich kann auch mehrere colgroups in einer Tabelle haben?

Liebe Grüße,

Bernd

PS: Ich wohne am Boxhagener Platz
http://www.strich-komma.de/kontakt/kontakt.html

[Gunnar Bittersmann]

Hello out there!

D.h. ich kann auch mehrere colgroups in einer Tabelle haben?

Ja, das sagt der Stern:

<!ELEMENT table  
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

^
? – nicht oder einmal
* – nicht oder beliebig oft

• – beliebig oft (mindestens einmal)

PS: Ich wohne am Boxhagener Platz

Na, vielleicht läuft man sich mal übern Weg.

See ya up the road,
Gunnar

[berdn]

Danke Gunnar,

... Du bleibst bei Deinem Wahlspruch ;-)
Gesehen habe wir uns bestimmt schon öfters ;-)

Liebe Grüße,

Berdn

PS: Dir auch mal meinen Dank für die gute Arbeit die Du hier leistest.

[DeWitt]

moin!

ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?

Mit CSS wurde ja schon eine Lösung angeboten (find ich fast schöner wie meine), aber falls dir Javascript auch recht ist:

  
var tabid = 'tab1';  
  
function toggleCol (iNumber) {  
 var TABLE = document.getElementById(tabid);  
 var TR = TABLE.getElementsByTagName("tr")[iNumber];  
 if(TR.style.display == 'none') TR.style.display = '';  
 else TR.style.display = 'none';  
}  
  
function toggleRow (iNumber) {  
 var TABLE = document.getElementById(tabid);  
 var TRs = TABLE.getElementsByTagName("tr");  
 var TH = TRs[0].getElementsByTagName("th")[iNumber];  
 if(TH.style.display == 'none') TH.style.display = '';  
  else TH.style.display = 'none';  
  
 for(var i=1;i<TRs.length;i++) {  
  var TD = TRs[i].getElementsByTagName("td")[iNumber-1];  
  if(TD.style.display == 'none') TD.style.display = '';  
  else TD.style.display = 'none';  
 }  
}  

Mit diesen Funktionen kannst du folgende Tabelle modifizieren:

  
  
<TABLE id="tab1" border="1" cellspacing="0" cellpadding="5"><TR>  
 <TH>&nbsp;</TH>  
 <TH>Spalte 1</TH>  
 <TH>Spalte 2</TH>  
  
</TR><TR>  
 <TH id="tha" style="border:1 solid red;">Zeile a</TH>  
 <TD>Wert 1a</TD>  
 <TD>Wert 2a</TD>  
  
</TR><TR>  
 <TH>Zeile b</TH>  
 <TD>Wert 1b</TD>  
 <TD>Wert 2b</TD>  
  
</TR></TABLE>  
  
<A href="javascript:toggleRow(1);">Spalte 1 ein/aus</A>  
<A href="javascript:toggleRow(2);">Spalte 2 ein/aus</A>  
  
<BR>  
  
<A href="javascript:toggleCol(1);">Zeile a ein/aus</A>  
<A href="javascript:toggleCol(2);">Zeile b ein/aus</A>  

[Roger]

moin!

klappt super. wobei ich mehr zur css-variante tendiere. javascript muss in beiden varianten ja verwendet werden. allerdings ist es bei der css-variante weitaus weniger. wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...

wer die wahl hat...

gruß.
roger.

[DeWitt]

wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...

siehe http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=NODE-Beschreibung, ist ja eigentlich nicht besonders schwer ;)

wer die wahl hat...

Genau, und wer die Wahl hat sollte wohl auf Javascript soweit wie möglich verzichten :)

[Roger]

moin!

ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.

(momentan erst mal nur die zeilen - keine spalten)

  
function toggleRow (Start, Stop)  
{  
 for(iNumber=Start;iNumber<=Stop;iNumber++)  
 {  
  var TABLE = document.getElementById(tabid);  
  var TR = TABLE.getElementsByTagName("tr")[iNumber];  
  if(TR.style.display == 'none') TR.style.display = '';  
  else TR.style.display = 'none';  
 }  
}  

übergeben wird hier die start- und stop-zeile. das macht sich gut für meine kategorieübersicht:

• kategorie stufe 1
     + kategorie stufe 2
        + kategorie stufe 3
           kategorie stufe 4

soweit das vereinfachte modell. ich hab's gern etwas komplizierter:

• kategorie stufe 1
     + kategorie stufe 2.1
        + kategorie stufe 3.1
           kategorie stufe 4.1
           kategorie stufe 4.2
           kategorie stufe 4.3
        + kategorie stufe 3.2
           kategorie stufe 4.1
           kategorie stufe 4.2
     + kategorie stufe 2.2
        + kategorie stufe 3.1
  [...]

jede stufe mit einem + (also 1-3) möchte ich zusammen und auseinander klappen lassen (ala explorer). leider kommt etwas verwirrung in die sache, wenn ich jetzt als erstes stufe 3 einklappe (z.b. zeile 4 bis 6) und anschließend stufe 1, ist der stop-wert bei stufe 1 niedriger, als wenn stufe 3 augeklappt ist :(

kann ich den stop-wert dynamisch ändern?

gruß.
roger.

[Cybaer]

Hi,

ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.
(momentan erst mal nur die zeilen - keine spalten)

BTW: Unter Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe findest Du ein Script, mit dem man so etwas machen kann. Beachte das 3. Beispiel, das auch mit einer Spalte arbeitet.

Gruß, Cybaer

[Roger]

moin!

BTW: Unter Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe findest Du ein Script

gefunden! ein traum! danke!
aber wie gesagt, das mit dem kompliziert machen...
ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.
ich nutze momentan onClick="toggle('fold','tr:id','zeileA1');" auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)

gruß.
roger.

[Cybaer]

Hi,

ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.

Ja. Beachte die "Komplementär-Funktionalität", die auf die angegebene Ausnahme-Elemente genau das Gegenteil macht - falls Du das meinst.

ich nutze momentan onClick="toggle('fold','tr:id','zeileA1');" auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)

Du kannst mit

• onClick="toggle('unfold','tr:id','zeileA1');" alle TRs ausklappen, deren IDs mit "zeileA1" beginnen, oder mit
• onClick="toggle('unfold','tr:id','zeile','A1');" alle TRs ausklappen, deren IDs mit "zeile" beginnen, mit Ausnahme der TR mit der ID "zeileA1" - die wird nicht angefaßt, oder mit
• onClick="toggle('unfold','tr:id','zeile','A1',true);" das gleiche machen, nur daß eben "zeileA1" jetzt nicht mehr ignoriert, sondern komplementär behandelt wird - "zeileA1" wird also, wie bei deinem Originalaufruf, eingeklappt. Das ist dann "fold" & "unfold" in einem Aufruf, statt in zweien.

Gruß, Cybaer

[Roger]

moin!

oh.. ähm.. das war mir jetzt alles zu komplimentär...
ich habe eine tabellenzeile (stufe 1), die gleichzeitig als button gelten soll. wenn ich drauf klicke, sollen alle kategorien unterhalb stufe 1 eingeklappt _und_ wieder ausgeklappt werden können (nach erneutem klick).

meine tr-ids hab ich jetzt nach den kategorien benannt:
1: zeile1
2: zeile11
3: zeile111
4: zeile112
5: zeile113
6: zeile12
7: zeile2
...

um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich
toggle('fold','tr:id','zeile1', '1');
leider klappt auch die angeklickte zeile (zeile1) weg - war wohl doch besser zusätzlich mit  buchstaben arbeiten...

btw: die tips waren gut. damit lässt sich ne menge anstellen.

gruß.
roger.

[Cybaer]

Hi,

um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich
toggle('fold','tr:id','zeile1', '1');
leider klappt auch die angeklickte zeile (zeile1) weg

Der Code bedeutet: Verstecke alle TRs mit den IDs "zeile1*". Die TR mit der ID "zeile11" soll nicht versteckt werden.
Wenn Du alle "zeile1*" (also "zeile1MitIrgendwasDahinter" ;-)) verstecken möchtest, aber (exakt) "zeile1" (ohne was dahinter ;-)) nicht, dann mußt Du anders vorgehen. Entweder neue Namen überlegen, oder, hey, eben diese ID separat behandeln:

toggle('fold','tr:id','zeile1'); toggle('unfold','zeile1');

Hier werden alle TRs versteckt, deren ID mit "zeile1" beginnen - also auch die exakte ID "zeile1" ohne was dahinter. Im 2. Aufruf wird dann genau diese ID wieder angezeigt.

Mag aber sein (zumindest käme es von der Logik her hin, daß Du einfach eine "leere Ausnahme" angibst. Denn die real behandelte ID ergibt sich ja aus "ID-Anfang" + "ID-Anhang". Wenn "zeile11" ausgenommen werden sollte, ist "zeile1" der Anfang und "1" der Anhang, macht zusammen "zeile1"+"1"="zeile11". Soll die (Gesamt-)ID "zeile1" ausgenommen werden dann könnte man auch den Anfang "zeile1" und den Anhang "" nehmen. Also

toggle('fold','tr:id','zeile1','');

Also: Klappe alles ein, was mit "zeile11" beginnt, aber nicht das Element mit der ID "zeile1"+""="zeile1"

Aber ich weiß nicht, ob das klappt ... :)

... könnte aber. 8-)

Gruß, Cybaer

[Roger]

moin!

toggle('fold','tr:id','zeile1','');

klappt mit der klappe.

steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?

gruß.
roger.

[Cybaer]

Hi,

toggle('fold','tr:id','zeile1','');
klappt mit der klappe.

Dann habe ich wohl gut programmiert. ;-)

steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?

Yep, klappiert. :)

Antwort: Nicht direkt, aber indirekt. ;-)

Mach halt toggle(klappe,'tr:id','zeile1',''); klappe=(klappe=="fold")?"unfold":"fold", wobei klappe ein Stringvariable ist, die anfangs mit "fold" initialisiert wurde - und nach toggle() den Wert wechselt.

Gruß, Cybaer

[Roger]

moin!

jetzt fehlte nur noch die verarbeitung für mehrere zeilen, den "fold" und "unfold" musste ja pro zeile gespeichert werden und nicht einmal global :)
dabei hilft mir ein array:

  
<script type="text/javascript" language="JavaScript">  
var klappe = new Array();  
function folding(stelle)  
{  
 if (klappe[stelle]=="fold") klappe[stelle] = "unfold";  
 else klappe[stelle] = "fold";  
 return klappe[stelle];  
}  
</script>  

^^ in den body bereich

und pro zeile nehme ich einfach eine stelle im array (am besten analog zur zeilenzahl):

onClick="toggle(folding(1),'tr:id','zeile1', '');"

mit der vereinfachten if-syntax habe ich es leider nicht hinbekommen :(

gruß.
roger.

[Cybaer]

Hi,

dabei hilft mir ein array:

Auch 'ne Möglichkeit.

Aber als "assoziatives Array" (sprich: Object) mit der ID als Schlüssel ist es vielleicht sinnvoller. Am einfachsten ist aber: Direkt als Objekt des jeweiligen (TR-)Elements!

Beispiel:

document.getElementById("zeile1").klappe="fold";
alert(document.getElementById("zeile1").klappe)

Vorgehensweise: Zur Initialisierung alle TRs durchgehen (schneller: nur die TRs der bewußten Tabelle). Ist es eine "zu klappende TR" (Eigenschaft id hat z.B. einen passenden Wert), dann verpaßt man der TR zum einen den passenden Eventhandler (onclick mit einer Funktion, die den toggle()-Aufruf enthält) und zum anderen, s.o., das "Status-Objekt" klappe.

Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf noch die "Wechsel-Syntax", die einheitlich so aussehen kann:

this.klappe=(this.klappe=="fold")?"unfold":"fold"

(this ist der Verweis auf das Element des onClicks, also die jeweilge TR)

Ist schön kurz & elegant, im HTML-Code ist nichts mehr von der Klapperei zu sehen (außer, daß die Elemente eine ID haben), und molily hat wieder ein schönes Beispiel fürs "Unobtrusive JavaScript" ... ;)

Gruß, Cybaer

[Cybaer]

Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf

Der sieht dann natürlich anders aus, z.B. so:

toggle(this.klappe,'tr:id',this.id,'');

this.klappe ist der Verweis auf das "Status-Objekt" und this.id der Verweis auf die ID der jeweiligen TR. Wenn also der HTML-Code <tr id="zeile1"> lautet, man beim Init mit onclick eine Funktion anhängt und mit klappe den Status auf "fold" setzt, dann hat man beim Klick auf die TR mit der ID "zeile1" einen toggle()-Aufruf der so aussieht:

toggle("fold",'tr:id',"zeile1",'');

Der Status wird danach gewechselt und der nächste Klick kann kommen. ;-)

Einheitliche Syntax für alle Zeilen und ohne JS im HTML-Code ...

Gruß, Cybaer

[Roger]

moin!

so langsam wird's heller. ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst. könntest du es nicht evtl. an einem kurzen beispielscript erklären? der ein oder andere wird es dir sicherlich danken :)

ansonsten halte ich jetzt erst mal this.klappe.

gruß.
roger.

[Cybaer]

Hi,

ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst.

Lobenswert - denn mindestens fürs nächste Mal ist man schlauer. ;)

könntest du es nicht evtl. an einem kurzen beispielscript erklären?

Das ist ja Arbeit! =;-) Im Ernst: Gerade so viel an der Backe, daß schon das Posten hier Luxus ist.

Der HTML-Code ist genannt: <tr id="zeile1">

Eine Schleife, um alle TRs anzusprechen dürfte bekannt sein.

Bliebe noch der Umstand wie man in einer Init-Funktion die Events setzt?

// In einer Schleife alle TR-Objekte durchgehen
obj=document.getElement...
// Feststellen, ob zu klappender TR
if(obj.id==...) { // Könnte konkret z.B. sein if(obj.id=="zeile1") - da ist dann eine sinnvolle, diesbezügl. leicht zu verwendende Vergabe der IDs gefordert, sowie ein arbeiten mit passenden Stringfunktionen
 obj.onclick=callToggle;
}
// Schleife von vorn bis alle Elemente durch

Und dann sollte es natürlich noch die Funktion callToggle() geben:

function callToggle() {
  // Ist sinnvoller, Wechsel von klappe toggle() voranzustellen - das spart die Initialisierung (klappe==""->"fold"->"unfold"->"fold"->...
  this.klappe=(this.klappe=="fold")?"unfold":"fold";
  toggle(this.klappe,'tr:id',this.id,'');
}

ansonsten halte ich jetzt erst mal this.klappe.

:)

Wenn's geht, versuch's doch mal hinzukriegen, und/oder gib mir den URL deiner soweit funktionierenden realen Seite (oder den Code selbst). Dann muß ich mir kein Beispiel ausdenken, sondern kann es "In der Realität" gleich durchziehen ...

Gruß, Cybaer