Tabellen wahlweise (un-)sichtbar schalten

[Felix Riesterer]

Lieber Chris,

Selbst wenn alle auf "display: none" gesetzt sind und ich nun eine Tabelle wieder erscheinen lasse, habe ich keine Funtkion, die beim Aufrufen einer neuen Tabelle die andern wieder alle verschwinden lässt.

spätestens jetzt wäre es sinnvoller, mit CSS-Klassen und IDs zu arbeiten, anstatt das display:none direkt in die Tabellen zu schreiben.

Beispiel:

<table id="irgendwas">....</table>  
<table id="irgendwasanderes">....</table>  
<table id="nochirgendwas">....</table>  
<table id="immernochwas">....</table>

Nun kann man hergehen und per Javascript alle Tabellen durchforsten. Dazu nimmt man var alleTabellen = document.getElementsByName("table").
Da man nur bestimmte Tabellen, nämlich die Tabellen mit IDs hin- und herschalten möchte, kann man die jeweils anderen Tabellen ausschließen. Dazu prüft man, ob die Tabellen eine ID haben, und wenn ja, ob diese kein Leerstring ist.

var i;  
for (i = 0; i < alleTabellen.length; i+++) {  
    if (alleTabellen[i].id && alleTabellen[i].id != "") {  
        alleTabellen[i] = false; // Tabelle aus der Liste austragen, da sie keine ID hat  
    }  
}

Nun hat man alle "schaltbaren" Tabellen gefunden. Jetzt kann man ihnen CSS-Klassen geben. Wir vergeben die CSS-Klasse "inaktiv":

for (i = 0; i < alleTabellen.length; i++) {  
    // haben wir eine ausgetragene Tabelle ohne ID erwischt?  
    if (alleTabellen[i]) {  
        // Nö, Tabelle hat ID  
        alleTabellen[i].className = "inaktiv";  
    }  
}

So. Jetzt kannst Du mit CSS definieren, dass die Klasse "inaktiv" eben display:none gesetzt ist und somit sind alle Tabellen unsichtbar.

Um nun eine Tabelle sichtbar zu schalten, muss man nur ihre ID kennen und kann ihr dann die Klasse "inaktiv" wieder wegnehmen, um sie sichtbar zu schalten.

Das alles könnte zusammengefasst so aussehen (Code ungetestet!!!):
<script type="text/javascript">

    //<![CDATA[  
    var layerSwitcher = { // wir definieren ein Objekt (JSON-Schreibweise)  
        alleInaktiv : function () {  
            var i;  
            var alleLayer = document.getElementsByName(layerSwitcher.layerElement);  
            for (i = 0; i < alleLayer.length; i+++) {  
                if (alleLayer[i].id && alleLayer[i].id != "") {  
                    alleLayer[i] = false; // Layer aus der Liste austragen, da keine ID  
                }  
            for (i = 0; i < alleLayer.length; i++) {  
                // haben wir einen ausgetragenen Layer ohne ID erwischt?  
                if (alleLayer[i]) {  
                    // Nö, Tabelle hat ID  
                    alleLayer[i].className = "inaktiv";  
                }  
            }  
        },  
  
        aktivieren : function (layerID) {  
            // CSS-Klasse "inaktiv" entfernen  
            var layer = document.getElementById(layerID);  
            if (layer) {  
                cssClass = layer.className;  
                layer.className = className.replace(/\binaktiv\b/), '');  
            }  
        },  
  
        init : function () {  
            // Den layerSwitcher nach dem Laden der Seite ausführen lassen  
            layerswitcher.oldWinOnLoad = window.onload; // bereits bestehende onload-Funktion retten  
            window.onload = function () {  
                if (typeof(layerSwitcher.oldWinOnLoad) == "function") {  
                    // bereits bestehende onload-Funktion ausführen  
                    layerSwitcher.oldWinOnLoad();  
                }  
                // Jetzt alle Layer inaktiv schalten  
                layerSwitcher.alleInaktiv();  
  
                // ersten aktiven Layer aktivieren  
                if (layerSwitcher.erstAktiv && layerSwitcher.erstAktiv != "") {  
                    layerSwitcher.aktiviere(layerSwitcher.erstAktiv);  
                {  
            }  
        }  
    };  
  
    layerSwitcher.init();  
  
    // <table> als zu suchende Layer einstellen  
    layerSwitcher.layerElement = "table";  
  
    // ersten aktiven Layer einstellen  
    layerSwitcher.erstAktiv = "irgendwas";  
    //]]>

</script>  
  
...  
<a href="php-generierte Seite für Javascript-lose" onclick="layerSwitcher.aktiviere('irgendwasanderes')">Irgendwasanderes</a>  

Vielleicht hilft Dir dieser Code etwas weiter beim Javascript-lernen und beim Lösen Deines Problems...

Liebe Grüße aus Ellwangen,

Felix Riesterer.