 |
Das deutsche QBasic- und FreeBASIC-Forum
Für euch erreichbar unter qb-forum.de, fb-forum.de und freebasic-forum.de!
|
| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
Eternal_pain
Anmeldungsdatum: 08.08.2006
Beiträge: 1783
Wohnort: BW/KA
|
 Verfasst am: 26.07.2010, 03:50 Titel: Hide Table (Javascript) [erledigt] |
 |
|
EDIT: geschafft  )
http://guildranks.pytalhost.de/
Nachdem ich mir aus Spieler Rank Listen eine Gildenrankliste erstellt habe wollte ich das ganze nun noch um einiges erweitern und zwar wollte ich mir zu den gilden auch die spieler dazu anzeigen lassen, aber nicht einfach nur so.
Ich wollte das machen, wenn man auf den entsprechenden Gildennamen klickt, eine Liste (herunterfaehrt)
Nach bisschen googlen und experimentieren hab ich ein gutes beispiel gefunden das dieses wohl bewerkstelligen sollte
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
</head>
<body>
<script type="text/javascript">
function displayRow(){
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
<table width="300" border="1">
<tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<p><button onclick="displayRow()" >Show / Hide</button></p>
</body>
</html> |
Bei diesem Beispiel habe ich nun aber das Problem das die Liste beim ersten mal laden geoeffnet ist, ich aber es haben moechte das diese geschlossen ist und erst aufgeht wenn man sie anklickt.
Bin leider nicht so vertraut mit JS und meine bisherigen versuche haben nichts gebracht...
_________________
Zuletzt bearbeitet von Eternal_pain am 26.07.2010, 15:06, insgesamt einmal bearbeitet |
|
| Nach oben |
|
 |
Sebastian
Administrator
Anmeldungsdatum: 10.09.2004
Beiträge: 5969
Wohnort: Deutschland
|
| Verfasst am: 26.07.2010, 10:20 Titel: |
|
|
Hallo,
so zum Beispiel könnte man das standardmäßige Ausblenden machen:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
</head>
<body>
<script type="text/javascript">
function displayRow(){
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
<table width="300" border="1">
<tr id="captionRow" style="display:none;"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<!-- Oder statt >>style="display:none;"<< (siehe Zeile 19) ginge auch: -->
<script type="text/javascript">
document.getElementById('captionRow').style.display = 'none';
</script>
<!-- Damit wird die Zeile per JavaScript beim Aufruf der Seite versteckt. Das
hat den Vorteil, dass jemand, der JavaScript nicht aktiviert hat, alle
Informationen sehen kann. Mit der style-Variante oben bleibt die Zeile einem
solchen Nutzer verborgen, da ohne JavaScript das Einblenden per Button
nicht funktioniert.
Wichtig: Das Versteck-JavaScript darf erst auftauchen, wenn dem Browser das
Element mit der ID "captionRow" bereits bekannt ist, sonst gibt's eine
Fehlermeldung. Also nicht einfach ganz an den Anfang des HTML schreiben,
es sei denn, ein OnLoad-Eventhandler wird benutzt. -->
<p><button onclick="displayRow()" >Show / Hide</button></p>
</body>
</html> |
Viele Grüße!
Sebastian
_________________
Die gefährlichsten Familienclans | Opas Leistung muss sich wieder lohnen - für 6 bis 10 Generationen! |
|
| Nach oben |
|
|
Eternal_pain
Anmeldungsdatum: 08.08.2006
Beiträge: 1783
Wohnort: BW/KA
|
| Verfasst am: 26.07.2010, 12:36 Titel: |
|
|
Vielen Dank sebastian
Ich bin allerdings schon wieder ein ganzes stueck weiter gekommen...
Nur klappt das Formatieren so wie ich es gern haette nicht..
habe eine ganze liste mit | Code: | | <tbody><tr><td></td></tr></tbody> |
also eigentlich ist jede einzellne reihe so aufgebaut...
Nun will ich eben diese verteckten reihen, in dem selben format so runterscrollen lassen, aber das klappt im moment so gar nicht...
er baut zwar irgendwie, irgendwas auf aber ganz sicher nichgt das was es soll....
bloed zu erklaeren, ich lad gleich mal einen versuch hoch (aber vorsicht, is FB generiertes HTML und nicht sehr uebersichtlich)
hier mal ein ausschnit:
| Code: | <tbody><tr>
<td><strong><font color="#FFFF00">Rank</font></strong></td>
<td><strong><font color="#FFFF00">Guild</font></strong></td>
<td><strong><font color="#FFFF00">Average Level</font></strong></td>
<td><strong><font color="#FFFF00">Points</font></strong></td>
</tr></tbody>
<tbody><tr>
<td><strong><font color="#FFFFFF">1</font></strong></td>
<td><strong><a href="#" onload="versteck()" onclick="anzeigen('vendetta')"><font color="#FFFFFF">Vendetta</font></a></strong></td>
<td><strong><font color="#FFFFFF">117</font></strong></td>
<td><strong><font color="#FFFFFF">3649</font></strong></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="memberlist" id="vendetta"><font color="#20EE20">1</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">MortimerJones</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">Titan</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">161</font></td>
</tr>
<tr>
<td class="memberlist" id="vendetta"><font color="#008000">2</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">M0HICAN</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">Titan</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">136</font></td>
</tr>
<tr>
<td class="memberlist" id="vendetta"><font color="#20EE20">3</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">masterZeus</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">Titan</font></td>
<td class="memberlist" id="vendetta"><font color="#20EE20">136</font></td>
</tr>
<tr>
<td class="memberlist" id="vendetta"><font color="#008000">4</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">Zanatos</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">Titan</font></td>
<td class="memberlist" id="vendetta"><font color="#008000">135</font></td>
</tr> |
_________________
|
|
| Nach oben |
|
|
Eternal_pain
Anmeldungsdatum: 08.08.2006
Beiträge: 1783
Wohnort: BW/KA
|
| Verfasst am: 26.07.2010, 13:13 Titel: |
|
|
sry fuer doppelpost 
ich habs nu fast perfekt... nur zwei sachen hab ich noch, ich moechte die liste bei erneuten klick auf den link wqieder schliessen konnen und kann man es irgendwie einrichten das text in einer grossen tabelle 'oben' steht statt in der mitte??
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auzura-EU Guild Ranks</title>
</head>
<body bgcolor="#000000" onload="verstecke()">
<script type="text/javascript">
function verstecke() {
var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == 'memberlist') {
thisElem.style.display = 'none';
}
}
}
function anzeigen(elementid)
{
var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == 'memberlist') {
thisElem.style.display = 'none';
}
}
document.getElementById(elementid).style.display = 'block';
}
</script>
<div align="center"><font color="#FFFF00"><Strong>Auzura-EU Guild Ranks</strong></font><BR>
<table cellpadding="0" cellspacing="0" border="0" width="90%">
<tbody><tr>
<td><strong><font color="#FFFF00">Rank</font></strong></td>
<td><strong><font color="#FFFF00">Guild</font></strong></td>
<td><strong><font color="#FFFF00">Average Level</font></strong></td>
<td><strong><font color="#FFFF00">Points</font></strong></td>
</tr></tbody>
<tbody><tr>
<td><strong><font color="#FFFFFF">1</font></strong></td>
<td><strong><a href="#" onload="versteck()" onclick="anzeigen('vendetta')"><font color="#FFFFFF">Vendetta</font></a></strong>
<table class="memberlist" id="vendetta"> border="0">
<thead>
<tr>
<td><font color="#20EE20">1</font></td>
<td><font color="#20EE20">MortimerJones</font></td>
<td><font color="#20EE20">Titan</font></td>
<td><font color="#20EE20">161</font></td>
</tr>
</thead>
<thead>
<tr> |
_________________
|
|
| Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
