Tabellen ein und ausblenden
theCooper
- javascript
0 Gernot Back
Hallo, ich arbeite derzeit an meiner website www.ps3page.de und ich habe ein kleines Problem, das von jemanden, der sich mit Javascript ein bisschen besser auskennt, leicht zu lösen sein dürfte.
Ich habe folgendes vor:
Ich will eine Tabelle, die einmal Inhalt A anzeigt (in meinem fall, die News) und im anderen Fall inhalt B , und inhalt A soll ausgeblendet werden. Ein beispiel findet ihr z.B. auf www.Gametrailers.com auf der rechten seite. Dort werden die neusten Foren beiträge angezeigt und wenn man auf News klickt, werden anstatt der neusten Beiträge, die neusten News angezeigt.
Ich habe schon ein funktionierendes Skript gefunden:
___________
<script language="JavaScript">
<!--
function showTable() {
if(document.getElementById('mytable').style.display=='none') {
document.getElementById('mytable2').style.display='none';
document.getElementById('mytable').style.display='inline';
} else {
document.getElementById('mytable').style.display='none';
document.getElementById('mytable2').style.display='inline';
}
return;
}
//-->
</script>
</head>
<body>
<table id="mytable">
<tr><td>BlaBla1</td></tr>
<tr><td>BlaBla2</td></tr>
</table>
<table id="mytable2" style="display:none;">
<tr><td>BlaBla3</td></tr>
<tr><td>BlaBla4</td></tr>
</table>
<br>
<form>
<input type=button value="Anzeigen" onClick="showTable();">
</form>
_________
Hier wird eine Tabelle angezeigt, wenn man jedoch auf den "Anzeigen" button klickt, wird diese ausgeblendet und stattdessen kommt die andere.
Ich will zwei buttons. Einen, dass die eine Tabelle angezeigt wird und einen eben für die andere.
Ich hoffe, dass man mein Problem verstehen kann und dass jemand das Script ein bisschen verändern kann.
Hallo theCooper,
Ich habe schon ein funktionierendes Skript gefunden:
> document.getElementById('mytable').style.display='inline';
Ich kann mir nicht vorstellen, dass das in allen Browsern funktioniert. In welchen Browsern hast du es getestet.
Ich will zwei buttons. Einen, dass die eine Tabelle angezeigt wird und einen eben für die andere.
Dann braucht deine Funktion, die du mit dem onclick-Eventhandler auf den jeweiligen Buttons aufrufst noch einen Übergabeparameter, der danach unterscheidet, an welcher der Tabellen die Funktion tätig werden soll.
Gruß Gernot
Ich habe schon ein funktionierendes Skript gefunden:
document.getElementById('mytable').style.display='inline';
> Ich kann mir nicht vorstellen, dass das in allen Browsern funktioniert. In welchen Browsern hast du es getestet.
>
Ich teste das mit Opera.
Was muss ich dann einsetzen, dass es auf allen Browsern funktioniert?
> > Ich will zwei buttons. Einen, dass die eine Tabelle angezeigt wird und einen eben für die andere.
>
> Dann braucht deine Funktion, die du mit dem onclick-Eventhandler auf den jeweiligen Buttons aufrufst noch einen Übergabeparameter, der danach unterscheidet, an welcher der Tabellen die Funktion tätig werden soll.
>
Ähh na ja, und wie macht man das? Ich hab leider noch keinerlei Erfahrungen mit Javaskript.
M´mfg.thecooper
Hi,
Ähh na ja, und wie macht man das? Ich hab leider noch keinerlei Erfahrungen mit Javaskript.
Dann besorg dir doch welche ...
MfG ChrisB
Dann halt nicht... ;)
Ich habs jetzt geschafft: hab zwei Buttons und das ganze wird in 4 Browsern korrekt dargestellt (opera, Firefox, Internet Explorer und Netscape).
Ich hab zwar in meinem ganzen Leben noch nie was mit Javascript gemacht und das ganze ist nicht so kompliziert, wie es mir bei der ersten Antwort vorgeschlagen wurde, aber es funktioniert...
[url=http://www.ps3page.de]Ergebniss[/url]
Hallo theCooper,
Ich hab zwar in meinem ganzen Leben noch nie was mit Javascript gemacht und das ganze ist nicht so kompliziert, wie es mir bei der ersten Antwort vorgeschlagen wurde, aber es funktioniert...
Ich wollte dich bestimmt nicht entmutigen. Meinen Tipp, die Display-Eigenschaft nicht auf "inline" zu stellen, hast du ja auch verstanden.
Die Default-Display-Eigenschaft für Tabellen ist ja "table", nur dass es für den IE das leider absurderweise "block" ist, weswegen es das Beste ist, die zugewiesene Style-Display-Eigenschaft "none" einfach über leere Zeichenkette wieder auf den jeweiligen Anzeige-Default-Wert des Browsers zurückzustellen.
Mit einem Übergabeparameter kämst du übrigens auch mit nur einer Funktion aus. Das ist auch nur eine weitere IF-Abfrage in der Funktion
Da hast du die Funktionen drin, aber auf welcher der Unterseiten werden sie überhaupt aufgerufen? Würde mich mal interessieren.
Weiterhin noch viel Spaß mit Javascript!
Gruß Gernot