Tabellenzeilen ausblenden (Fortsetzung)

[Cybaer]

Fortsetzung des archivierten Threads:

Hi Gernot,

Dann ist meine Lösung vielleicht gar nicht komplizierter (38 Zeilen reiner JS-Code)!

Wie man's nimmt. Die Verwendung von innerHTML (statt z.B. einer CSS-Hintergrundgrafik "+/-") hat dich etwas "gerettet". ;-)

Außerdem sind dir natürlich die Opera-User dankbar, weil dessen JS-Fähigkeiten zwar lausig sind, aber für deine Variante reicht's noch. ;->

Kürzer ginge es ansonsten halt ohne das ganze init() mit einem einfachen

  
// Setzen der Eigenschaft display in Regel Nr.5 des Stylesheets Nr.1  
if(setStyle(0,5,"display","none")) {  
 setStyle(0,1,"cursor","n-resize");  
} else {  
 alert("Ich mach nix! Der Browser ist technisch nicht aktuell!")  
}  

wobei setStyle dann so aussehen kann:

  
function setStyle(sheet,rule,attrib,value) {  
 if(document.styleSheets) {  
  ((document.styleSheets[sheet].cssRules)?document.styleSheets[sheet].cssRules[rule].style:document.styleSheets[sheet].rules[rule]).style[attrib]=value;  
  return true;  
 } else {  
  return false;  
 }  
}  

Sollen mehrere Tabellen/Blöcke mittels einer einzigen Klasse so gewechselt werden, emfiehlt es sich natürlich wirklich, mit className zu arbeiten. Aber man könnte auch die Klasse show per setStyle(0,5,"display","none") verstecken, und beim (ersten) Aufruf von aufZu() mit setStyle(0,5,"display","") wiederherstellen und anschließend ganz normal mit className zu arbeiten. Und da nicht mit innerHTML gearbeitet wird (man könnte ja eben auch ein "+/-" mittels setStyle ändern), würde auch der Code innerhalb der Seite entfallen. Man kann so ja alles mit JS verstecken, bevor der BODY überhaupt beginnt ...

Gruß, Cy-"viele Wege führen nach Rom"-baer

PS: Selbst der neue Opera 8 unterstützt immer noch nicht styleSheets. Na ja, es reicht ja auch, wenn wirklich wichtige Browser wie IE, Mozilla, Konqueror und Safari das tun. ;-> (soviel auch zum Thema "Opera und Standards")

[Cybaer]

Errata:

Natürlich wird Regel 5 in Sheet 0 angesprochen (Klasse show), also:
// Setzen der Eigenschaft display in Regel Nr.5 des Stylesheets Nr.0

und ein "style zuviel im W3C-dOM-Zweig von setStyle(), also korrekt:

((document.styleSheets[sheet].cssRules)?document.styleSheets[sheet].cssRules[rule]:document.styleSheets[sheet].rules[rule]).style[attrib]=value;

Gruß, Cy-"ich sach ja: Wochenanfang und =%-)"-baer

[Gernot Back]

Hallo Cybaer,

Fortsetzung des archivierten Threads:

Gruß, Cy-"viele Wege führen nach Rom"-baer

Deshalb hier jetzt hoffentlich eine endlich ausgreifte Version mit ausgetauschten Hintergrunddgrafiken und Texten in den jeweils ersten TH-Zellen:

http://www.sprachlernspiele.de/selftests/klapptabelle/version7.html

PS: Selbst der neue Opera 8 unterstützt immer noch nicht styleSheets. Na ja, es reicht ja auch, wenn wirklich wichtige Browser wie IE, Mozilla, Konqueror und Safari das tun. ;-> (soviel auch zum Thema "Opera und Standards")

Nach einigem Herumprobieren schließe mich auch inzwischen deiner Meinung an, dass es bei meiner Variante am besten ist, nur mit getElementsByTagName zu arbeiten, ganz ohne All- und auch ganz ohne Node-Objekt. Die Gefahr einer Endlosschleife bei fehlenden TR- oder TH-Elementen ist so gebannt.

Der JS-Code ist jetzt auch noch mal deutlich übersichtlicher geworden:

  
function init () {  
  if(document.getElementsByTagName) {  
    var tabell = document.getElementsByTagName('table');  
    var letzte = tabell[tabell.length-1];  
    var grupos = letzte.getElementsByTagName('tbody');  
    if(grupos[0] && typeof(grupos[0].className)!="undefined" && typeof(grupos[0].innerHTML)!="undefined") {  
      for (i=0; i<grupos.length; i++ ) {  
        grupos[i].className='hide';  
        grupos[i].enkel = grupos[i].getElementsByTagName('th')[0];  
        grupos[i].txt = grupos[i].enkel.innerHTML;  
        grupos[i].enkel.innerHTML += ' aufklappen';  
        grupos[i].enkel.style.cursor = 'n-resize';  
        //grupos[i].enkel.className='erst';  
        grupos[i].enkel.style.background='url(plus.gif) no-repeat 2px -1px';  
        grupos[i].onclick = aufZu;  
      }  
    }  
  }  
}  
  
function aufZu () {  
  if(this.className=='hide') {  
    this.className='show';  
    this.enkel.innerHTML = this.txt + '  &nbsp;zuklappen';  
    this.enkel.style.background='url(minus.gif) no-repeat 2px -1px';  
  } else {  
    this.className='hide';  
    this.enkel.innerHTML = this.txt + ' aufklappen';  
    this.enkel.style.background='url(plus.gif) no-repeat 2px -1px';  
  }  
}  

Der Internet-Explorer kann offensichtlich innerhalb einer Schleife nicht gleichzeitig den className eines Eltern- und eines Kindelementes austauschen, geht man aber stattdessen bei einem der beiden über die Style-Eigenschaft, funktioniert es.

Gruß Gernot

[Cybaer]

Hi,

Deshalb hier jetzt hoffentlich eine endlich ausgreifte Version mit ausgetauschten Hintergrunddgrafiken und Texten in den jeweils ersten TH-Zellen:

Jo, very nice. :-)

Eine Schönheitskorrektur allerdings noch (mal von solchen Dingen wie er Verwendung von globalen Variablen abgesehen ;-)):

Der Aufruf von init() sollte IMHO besser in die letzte Content-TD. Alternativ sollte nicht die init-TD ein display:none bekommen, sondern die TR der init-TD! Oder das CSS wird nochmals geändert. Jedenfalls finde ich den dickeren unteren Rand störend, da er nur sichtbar ist, wenn "C" ausgeklappt wurde.

init() im letzten Content-TD sieht zumindest am nettesten aus, falls es JS und CSS deaktiviert wurden (oder sonstwie nicht vorhanden sind).

Aber nicht ändern können wirst Du die prinzipielle Ungleichmäßigkeit, die mich bei dieser Lösung von Anfang an gestört hatte: Die verschiedenen Abstände, die sichtbar sind, wenn die Blöcke eine unterschiedliche Anzahl von Reihen beinhalten.

Diese Unschönheit ist halt bei der TBODY-Lösung systemimmanent. Wer eine solche Tabelle hat, der dürfte es schöner finden, wenn er die TRs manipulieren kann.

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Jo, very nice. :-)

Eine Schönheitskorrektur allerdings noch (mal von solchen Dingen wie er Verwendung von globalen Variablen abgesehen ;-)):

Globale Variablen, wo? Klär mich auf!

Der Aufruf von init() sollte IMHO besser in die letzte Content-TD. Alternativ sollte nicht die init-TD ein display:none bekommen, sondern die TR der init-TD! Oder das CSS wird nochmals geändert. Jedenfalls finde ich den dickeren unteren Rand störend, da er nur sichtbar ist, wenn "C" ausgeklappt wurde.

init() im letzten Content-TD sieht zumindest am nettesten aus, falls es JS und CSS deaktiviert wurden (oder sonstwie nicht vorhanden sind).

Das habe ich jetzt geändert.

Aber nicht ändern können wirst Du die prinzipielle Ungleichmäßigkeit, die mich bei dieser Lösung von Anfang an gestört hatte: Die verschiedenen Abstände, die sichtbar sind, wenn die Blöcke eine unterschiedliche Anzahl von Reihen beinhalten.

Diese Unschönheit ist halt bei der TBODY-Lösung systemimmanent. Wer eine solche Tabelle hat, der dürfte es schöner finden, wenn er die TRs manipulieren kann.

Systemimmanent beim IE! Was tut man nicht alles für diesen Standards ignorierenden Browser:

http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html

Bist du jetzt zufrieden mit mir, Meister? Selbst bei den Variablen- und Funktionsnamen könnte man doch jetzt glatt meinen, es sei ein Cybaer-Code.

Dein Jünger,

Gernot

[Cybaer]

Hi,

Globale Variablen, wo? Klär mich auf!

Oops, sorry, verguckt! X-)

Systemimmanent beim IE! Was tut man nicht alles für diesen Standards ignorierenden Browser:

Jo, obwohl ich mir spontan nicht sicher bin, ob er hier wirklich einen Standard ignoriert, oder nur anders interpretiert. Unlogisch ist es IMHO allemal - aber das kann man ja auch bei so manchem Standard sagen. ;->

Bist du jetzt zufrieden mit mir, Meister?

Supi-dupi-super! :))

Selbst bei den Variablen- und Funktionsnamen könnte man doch jetzt glatt meinen, es sei ein Cybaer-Code.

(grrr), toggle() gibt's aber schon! =;-)

Und nein, mitnichten! Cybaer-Code sähe trotzdem anders aus. Mindestens 10-mal so groß. Aber dafür könnte man alle möglichen Elemente so verzwirbeln (und nicht "nur" TBODY/TR - die könnte man dann als Parameter übergeben, die gleichzeitg ggf. auch noch die Default-Parameter wären ;-)) inkl. noch Parameter für On/Off-Wunschgrafiken. ;-)

So spezifische/halb-allgemeine Funktionen mache ich eher nicht. Wenn, dann ganz allgemeine (und deswegen deutlich größere) Funktionen, ggf. mit spezifischen, ganz kleinen, "Aufrufer-Funktionen". 8-)

Aber das soll ausdrücklich keine Kritik sein! Da gilt IMHO nicht besser oder schlechter, sondern Gleichberechtigung. Hängt ja auch vom persönlichen Entwicklungsstil ab ...

Dein Jünger,

Sach nich sowas! Macht mich nur älter! =;-)

Gruß, Cybaer