Hallo,
ich möchte eine anfangs versteckte Tabelle per Klick auf einen Button einblenden können.
Der Code dafür ist:
[code]
| BlaBla |
| BlaBla |
Mein Problem ist, dass ich nur den Button “Anzeigen” haben möchte, “Verstecken” soll standartmässig aktiviert sein.
Aktuell kann ich die Tabelle nur per “Verstecken” ausblenden und mit “Anzeigen” wieder sichtbar machen.
Vielen Dank,
Tim
Edit: Hier habe ich das Ganze in meinem Blog als Anleitung verfasst: Tabelle per JavaScript einblenden
window.onload = function() {
document.getElementById('myTable').style.display = 'none';
}
oder einfach nach der Tabelle
<script type="text/javascript">
document.getElementById('myTable').style.display = 'none';
</script>
oder noch einfacher:
vorzuziehen wäre balmungs methode, da sie nur css, statt css & javascript voraussetzt. außerdem habe ich ab und zu bemerkt, dass zb auf leistungsschwacher hardware ein “zucker” zu sehen ist, wenn ich etwas gleich am anfang mit js ausblenden will, sprich, dasses kurz da ist und dann gleich weg, und das sieht scheiße aus.
machs mit css.
gruß
und Leute wie hoffmann werden die Tabelle nie zu Gesicht bekommen 
Da es sich auch nur um eine JavaScript-Spielerei handelt, würde ich das auch lieber mit JS ausblenden.
Wenn schon mit Skript, so ist es in der Tat nur sinnvoll, jeweils dieselbe Methode zu verwenden,
um etwas aus- und wieder einzublenden.
Also entweder man verwendet nur (X)HTML für die Dynamik oder nur CSS oder nur ein Skript
(welches dann über DOM (X)HTML und CSS) manipuliert). Entsprechend, sofern verfügbar
würde man auch aus- und einblenden mit deklarativer Animation durchführen und dies nicht
mit anderen Techniken mischen. Das wäre an sich für solch eine Anwendung eine bessere
Wahl, angeblich sollen es aktuelle Geckos sogar können, wenn man es geschickt anstellt.
Ansonsten kommt es zu unsinnigen Anzeigen, wenn CSS oder Skript nicht interpretiert wird.
Wenn ohne zusätzliche Tricks alle Information verfügbar ist, kann der Nutzer bei Problemen
immer noch mangelhafte Sachen abschalten, um an Informationen zu kommen. Andersherum
wird er nicht erfahren, daß es überhaupt Inhalt gibt und den Autor für einen Dummkopf
halten, der die Zeit anderer Menschen mit inhaltlich sinnlosen Seiten verschwendet ;o)
Bei der Methode nur mit (X)HTML würde man das machen, indem man die Tabelle in ein
zusätzliches Dokument schiebt und dann object oder iframe verwendet, um ein Dokument
mit dem Verweis auf die Datei einzubinden.
Bei CSS gibt es wiederum das Problem, daß neben :hover nur :active und :focus vorliegen,
um etwas Dynamik zu starten. Obgleich die CSS-WG sich um Animation etc bemüht, hapert
es da noch mächtig in der Kompetenz bei Ereignisverwaltungen, daher eignet sich derzeit
CSS nur bedingt, ob sich das in den nächsten Jahren ändern wird, ist ungewiß.
Deklarative Animation (SMIL) ist gut durchdacht, aber wird von aktuellen browser eher bei SVG
umgesetzt, nicht bei (X)HTML, da mangelt es also nicht an den inhaltlichen Möglichkeiten,
sondern an der Umsetzung bei den browser-Anbietern.
Für solch einfache Effekte ist JS natürlich einsetzbar, wenn auch gegenüber deklarativer
Animation für solch einen Zweck suboptimal, was man aber teilweise dadurch kompensieren
kann, daß man es konsequent nutzt, damit es nicht zu Mängeln kommt, wenn entweder JS oder
CSS nicht interpretiert wird.
Hallo,
syr, ich habe noch eine Frage:
Dieser Code blendet wunderbar eine neue Tabelle ein, wie kann ich mit einem Klick noch eine weitere einblenden?
<input name="button" type="button"
onclick="Javascript:document.getElementById('mytable').style.display='';" value="Weiter" />
Ausgeblendet werden Sie auch mit JavaScrit mit Folgendem Code, so bleibt es auch für Besucher ohne Javascript benutzbar (Vielen Dank für den Tipp )
<script type="text/javascript">
document.getElementById('myTable').style.display = 'none';
</script>
Tim
[quote=“kauderwelsch”]
Dieser Code blendet wunderbar eine neue Tabelle ein, wie kann ich mit einem Klick noch eine weitere einblenden?
<input name="button" type="button"
onclick="Javascript:document.getElementById('mytable').style.display='';" value="Weiter" />[/quote]
Wie wärs mit: Weiter Tabelle einbauen - Button zum einblenden einbauen?
Wenn du beliebig viele Tabellen generieren willst schreib dir ne ‘Tabellen-Factory’
Hi Morpheus,
ich möchte eine weitere Tabelle gleichzeitig einblenden, da sie mit der 1. direkt zusammen hängt und auch gleichzeitig kommen muss.
Die 2. Tabelle brauche ich, da ich die Spaltenabstände in dem neuen Bereich anders aufteilen möchte, oben aber alles einheitlich bleiben soll.
Deswegen die neue Tabelle die gleichzeitig kommen soll
Tim
Dann bau dir ein Elternelement um die beiden Tabellen und blende dieses ein und aus.
Guter Weg.
Sonst mach einfach copypasta von dem was du hast (neue id vergeben freilich) und leg beides auf deinen button.
… onclick=“zeigeTabelle1(); zeigeTabelle2();” …
Oder … onclick=“zeigeTabelle1Und2();” …
Oder … onclick=“zeigeTabelle( idVonTabelle1 ); zeigeTabelle( idVonTabelle2 );” …
Oder wie bisher … onclick="document.getElementById(‘tabelle1’).style.display=‘block’; document.getElementById(‘tabelle2’).style.display=‘block’; "
Oder du regelst es über eine CSS-Klasse
Oder du lädst es bei Bedarf per Ajax nach
Oder du generierst die Tabellen bei Bedarf erst per JS
oder oder oder
