Tabelle mit 1 Butten ein-/ausblenden
0 
molily
0 
Der Martin
0 
Gunnar Bittersmann
Tabelle mit 1 Butten ein-/ausblenden
Matthias ApselHallo zusammen,
ich habe schon viel gegoogelt aber leider fand ich keine passende Hilfe für mein Problem..
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.. So sieht der Quelltext aus:
<html>
<head>
<title>Tabelle ein-/ausblenden</title>
<script type="text/javascript">
function schreibeTabelle ()
{
document.write('<table border="1" id="Tabelle" style="display:none"><tr>');
document.write('<td>Inhalt der Tabelle</td></tr>');
document.write('</table>');
}
function einaus ()
{
var = " ";
if (document.getElementById('Tabelle').style.display = "block")
Fall = "1";
if (document.getElementById('Tabelle').style.display = "none")
Fall = "2";
switch (Fall)
{
case "1":
document.getElementById('Tabelle').style.display = "none";
break;
case "2":
document.getElementById('Tabelle').style.display = "block";
break;
}
}
</script>
</head>
<body>
<script type="text/javascript">
schreibeTabelle();
</script>
<form>
<input type="button" value="Tabelle ein-/ausblenden" onclick="javascript:einaus()">
</form>
</body>
</html>
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!
-
Hallo,
Das ist der http://de.selfhtml.org/javascript/sprache/operatoren.htm#zuweisung@title=Zuweisungsoperator:
=
Der ist der http://de.selfhtml.org/javascript/sprache/operatoren.htm#vergleich@title=Vergleichsoperator:
==
if (document.getElementById('Tabelle').style.display = "block")
Das ist eine Zuweisung, sollte aber ein Vergleich sein.
Mathias
-
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--
Die letzten Worte des Fallschirmspringers:
ELENDE SCHEISSMOTTEN!!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
@@Bernd:
nuqneH
So sieht der Quelltext aus:
<html>Davor fehlt
<!DOCTYPE html>, um den Quirksmodus zu verhindern.<head>
<title>Tabelle ein-/ausblenden</title>
<script type="text/javascript">type="text/javascript"ist in HTML5 überflüssig. Scripte sollten besser nicht im head stehen (bzw. eingebunden werden), sondern am Ende des body, um das Rendern der Seite nicht zu blocken. Das verbietwt dann natürlich die Verwendung vondocument.write(). Was nicht tragisch ist, da man Inhalte mit DOM-Methoden oderinnerHTMLauf die Seite (ins DOM) bekommt.function schreibeTabelle ()
Warum wird die Tabelle eigentlich mit JavaScript erzeugt und steht nicht im HTML?
function einaus ()
{
var = " ";
if (document.getElementById('Tabelle').style.display = "block")
Fall = "1";
if (document.getElementById('Tabelle').style.display = "none")
Fall = "2";Zu dem Vergleichsoperator hat sich molily ja schon geäußert.
Ein weiterer Fehler ist, dass du
Fallals globale Variable verwendest. Das sollte man unbedingt vermeiden. Vielleicht wolltest du das mit der Zeilevar Fall = " ";ursprünglich tun, aber dir sind die Fälle davongeschwommen. (5€ in die Wortwitzkasse.)var Fall;ohne Wertzuweisung hätte genügt.Außerdem solltest du unbedingt geschweifte Klammern setzen, auch wenn nur eine Anweisung im if-Zweig steht. Das ist sonst eine üble Fehlerquelle. Ich sag nur
goto fail;switch (Fall)
{
case "1":
document.getElementById('Tabelle').style.display = "none";
break;
case "2":
document.getElementById('Tabelle').style.display = "block";
break;
}
}Das ganze Konstrukt, erst Fall zu setzen und dann für switch zu verwenden, ist aber überflüssig. Die Anweisungen aus case können doch direkt in den if-Zweigen stehen:
function einaus() { if (document.getElementById('Tabelle').style.display == "block") { document.getElementById('Tabelle').style.display = "none"; } if (document.getElementById('Tabelle').style.display == "none") { document.getElementById('Tabelle').style.display = "block"; } }Da aber nur die 2 Werte "block" und "none" im Spiel sind, kann man sich die 2. Abfrage sparen und
elseverwenden:function einaus() { if (document.getElementById('Tabelle').style.display == "block") { document.getElementById('Tabelle').style.display = "none"; } else { document.getElementById('Tabelle').style.display = "block"; } }Was sich http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben ließe:
function einaus() { document.getElementById('Tabelle').style.display = (document.getElementById('Tabelle').style.display == "block") ? "none" : "block"; } }Es ist aber nicht sinnvoll, bei jedem Aufruf der Funktion das Element erneut aus dem DOM herauszusuchen. Das tut man einmal und speichert es in einer Variablen:
var tableElement = document.getElementById('Tabelle'); function einaus() { if (tableElement.style.display == "block") { tableElement.style.display = "none"; } else { tableElement.style.display = "block"; } }bzw.
var tableElement = document.getElementById('Tabelle'); function einaus() { tableElement.style.display = (tableElement.style.display == "block") ? "none" : "block"; } }Oder man übergibt es als Parameter. Dann ließe sich die Funktion
einaus()auch für andere Elemente verwenden:var tableElement = document.getElementById('Tabelle'); function einaus(element) { element.style.display = (element.style.display == "block") ? "none" : "block"; } }Aufruf dann nicht mit
einaus(), sonderneinaus(tableElement).Wie Der Martin schon sagte, ist es aber besser, style-Eigenschaften NICHT mit JavaScript zu ändern, sondern Zustände durch Änderungen im DOM (bspw. durch Klassenzugehörigkeiten) umzusetzen. Siehe http://forum.de.selfhtml.org/archiv/2010/7/t199119/#m1338839.
Wie’s gemacht wird, siehe http://forum.de.selfhtml.org/archiv/2014/1/t216394/#m1483795.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Meine Herrn... ich bin geschockt wieviele Fehler ich gemacht habe.. HTML und Javascript sind eben eine Wissenschaft für sich :) Ich werde mir eure Tipps zu Herzen nehmen und schauen wie ich mich verbessern kann!
Danke!
Liebe Grüße, Bernd-
Om nah hoo pez nyeetz, Bernd!
Ich werde mir eure Tipps zu Herzen nehmen und schauen wie ich mich verbessern kann!
Beginne mit der Frage, warum die Tabelle mit JavaScript erstellt werden muss.
Matthias
-
-
