Tabelle mit 1 Butten ein-/ausblenden

[Der Martin]

Moin,

Es geht um folgendes: Ich möchte eine Tabelle mit Javascript erstellen, welche ich dann mit einem Button entweder einblenden oder eben ausblenden kann. Nun habe ich lange versucht das Problem zu meistern, aber es will einfach nicht funktionieren.

das heißt was genau?

Also: Die Tabelle ist zunächst ausgeblendet. Nach dem klicken auf dem Button wird die Tabelle sichtbar. Drück ich dann aber erneut den Button passiert nichts... Ich stehe vor einem Rätsel. Bin dankbar für jede Erklärung und Hilfe!

function einaus ()
  {
  var = " ";

Schon hier sollte dir das Script mit einem Syntax Error um die Ohren fliegen. Und zwar sofort beim ersten Aufruf. Welchen Sinn hat diese Anweisung?

if (document.getElementById('Tabelle').style.display = "block")
    Fall = "1";
  if (document.getElementById('Tabelle').style.display = "none")
    Fall = "2";

So. Als erstes blendest du die Tabelle ein, indem du der display-Eigenschaft den Wert "block" zuweist, dann sofort wieder aus, indem du derselben Eigenschaft den Wert "none" zuweist. Fall hat an dieser Stelle also immer den Wert "2" (btw: Warum als String?), weil die Werte "block" und "none" beide zu true ausgewertet werden.
Das kurze Einblenden bleibt unsichtbar, weil der Browser zwischendurch keine Gelegenheit hat, die Anzeige neu aufzubauen.

switch (Fall)
    {
    case "1":
      document.getElementById('Tabelle').style.display = "none";
      break;
    case "2":
      document.getElementById('Tabelle').style.display = "block";
      break;
    }

Da immer Fall=="2" vorliegt, wird auch immer style.display="block" gesetzt, die Tabelle bleibt sichtbar. Wobei das der falsche Wert ist; eine Tabelle hat normalerweise display="table".

Es gäbe noch einiges zu sagen - zum Beispiel würde ich dir von der Verwendung von document.write() dringend abraten, und die Abfragefunktion einaus() ist unnötig kompliziert. Außerdem möchte man Funktionslogik und Darstellung eigentlich sauber getrennt haben und deshalb nicht direkt style-Eigenschaften setzen oder abfragen, sondern dem Element oder einem seiner Vorfahren je nach Zustand eine Klasse geben bzw. diese Klasse wieder wegnehmen. So kann man die beiden Anzeige-Zustände sauber in CSS formatieren.

<script type="text/javascript">
    schreibeTabelle();
    </script>

Da diese Funktion nur ein einziges Mal aufgerufen wird (später geht's ja nicht mehr), ist es nicht unbedingt sinnvoll, hier wirklich eine Funktion zu verwenden. Stattdessen würden ich den Code hier direkt notieren.

<form>
<input type="button" value="Tabelle ein-/ausblenden" onclick="javascript:einaus()">
</form>

Wenn's wirklich nur ein Button mit einer Javascript-Funktion sein soll, braucht's kein Formular drumherum. Ohne action-Attribut und ohne submit-Möglichkeit ist ein form sowieso sinnlos. Auch das Label "javascript:" im Eventhandler ist überflüssig.

So long,
 Martin