Mehrere Tabellen ausblenden

[Jan]

Hallo ich habe mehrere Tabellen und diese per id gekennzeichnet (tab1, tab2... etc.)

eine tabelle mittels

document.getElementById('tab2').style.display='none';

auszublenden ist kein problem aber wie kann ich mehrere ausblenden?!
ich hoffe mir kann geholfen werden... die suche im internet hat nich genau zu dem ergebnis geführt das ich wollte oder ich hätte es nicht so umsetzten können weil ich nicht all zu tief mit js vertraut bin.

[molily]

Hallo,

eine tabelle mittels

document.getElementById('tab2').style.display='none';

auszublenden ist kein problem aber wie kann ich mehrere ausblenden?!

Indem du denselben Befehl mehrfach ausführst, nur mit anderem getElementById-Parameter?

Wenn es viele Tabellen sind, nutzt du eine for-Schleife, zählst von 1 bis zur Anzahl der Tabellen und schreibst im Schleifenkörper getElementById("tab" + i).

Mathias

[Jan]

also ich hab jetzt meine funktion:

function ausblenden()
{
document.getElementById('tab2').style.display='none';
document.getElementById('tab3').style.display='none';
}

und rufe diese mit dem link

<a href="javascript:ausblenden('tab2');">ausblenden</a>

auf.. wie schreibe ich jetzt in den link das mehrere aufzurufen sind? oder hab ich schon die funktion falsch und deine antwort falsch interpretiert?

[molily]

Hallo,

function ausblenden()
{
document.getElementById('tab2').style.display='none';
document.getElementById('tab3').style.display='none';
}

und rufe diese mit dem link

<a href="javascript:ausblenden('tab2');">ausblenden</a>

auf.. wie schreibe ich jetzt in den link das mehrere aufzurufen sind?

Mit mehreren Parametern:

ausblenden('tab2', 'tab3', 'tab4') usw.

In der Funktion kannst du dann die variable Anzahl von Parametern verarbeiten, indem du mit dem arguments-Array arbeitest:

for (var i = 0; arguments.length; i++) {
  var argument = arguments[i];
  document.getElementById(argument).style.display = "none";
}

Wahrscheinlich gibt's aber eine einfache Möglichkeit, indem man CSS clever nutzt. Wenn es ein festes Set an Elementen ist, das du ausblenden willst, dann gib ihnen dieselbe Klasse. Mit CSS und JavaScript kannst du dann in einem Rutsch alle ein- oder ausblenden:

CSS-Regeln:
body.tabs-ausgeblendet .tabs { display:none; }
body.tabs-eingeblendet .tabs { display:block; }

Im JavaScript dann:
document.body.className = "tabs-ausgeblendet";
oder
document.body.className = "tabs-eingeblendet";

Blendet dann alle Elemente mit der Klasse »tabs« ein bzw. aus.

Mathias

[Jan]

vielen dank für die mühe!!!

[Gunnar Bittersmann]

@@Jan:

also ich hab jetzt meine funktion:

function ausblenden()
{
document.getElementById('tab2').style.display='none';
document.getElementById('tab3').style.display='none';
}

und rufe diese mit dem link

<a href="javascript:ausblenden('tab2');">ausblenden</a>

auf..

Wieso? Der Parameter 'tab2' wird überhaupt nicht beachtet; die Funktion 'ausblenden()' erwartet keine Parameter, sondern blendet die Elemente mit den IDs 'tab2' und 'tab3' aus.

Du meintest eher sowas:

function ausblenden(id)  
{  
  document.getElementById(id).style.display='none';  
}

wie schreibe ich jetzt in den link das mehrere aufzurufen sind?

<a href="javascript:[code lang=javascript]ausblenden('tab2'); ausblenden('tab2');">ausblenden</a>[/code]

Wobei das 'a'-Element fehl am Platze ist: Links führen gewöhnlich zu anderen Ressourcen; Aktionen werden mit Buttons ausgelöst. Also besser keinen Link, sondern einen Button anbieten:

<button onclick="[code lang=javascript]ausblenden('tab2'); ausblenden('tab2');">ausblenden</button>[/code]

Eine bessere Implementierung ist molilys Gedanke, die Funktion mit mehreren Parametern aufzurufen, oder noch besser, CSS ('body' mit 'class'; Nachfahrenselektoren) zu nutzen.

Live long and prosper,
Gunnar