Tabellenzeilen ausblenden (Fortsetzung)

[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