Een tabel in en uitlaten klappen.

Status
Niet open voor verdere reacties.
N

Niellles

Gebruiker
Lid geworden
21 jun 2008
Berichten
194
Hallo allemaal ik ben een absolute leek wat betreft .js.
M'n kennis houdt ongeveer op bij document.write() en wat variabelen aanmaken.
Ik wil het volgende doen:

Er zijn twee afbeeldingen laten we ze even open.gif en sluit.gif noemen.
Er is ook een tabel die er qua structuur ongeveer zo uit ziet:

HTML: 
<table class="overzicht">
<tr><th colspan="4">Speeldag 1</th></tr>
<tr><th colspan="2">Team A</th><th colspan="2">Team B</th></tr>
<tr><td>Niels</td><td>Niels</td><td>Meno</td><td>Menno</td></tr>
<tr><th colspan="4">Speeldag 2</th></tr>
<tr><th colspan="2">Team A</th><th colspan="2">Team B</th></tr>
<tr><td>Niels</td><td>Niels</td><td>Meno</td><td>Menno</td></tr>
<tr><th colspan="4">Speeldag 3</th></tr>
<tr><th colspan="2">Team A</th><th colspan="2">Team B</th></tr>
<tr><td>Niels</td><td>Niels</td><td>Meno</td><td>Menno</td></tr>
</table>

Deze tabel kan langer of korter zijn dat ligt eraan hoe hij door mijn php gevuld wordt (unieke ids meegeven aan onclicks etc is dus geen probleem...)

Ik wil nu graag dat als iemand mijn site bezoekt alleen de <th>'s met speeldagen zichtbaar zijn en dat er achter de speeldag het plaatje open.gif staat. Als hier op gedrukt wordt moet het plaatje veranderen in sluit.gif en moeten alle <tr>'s die bij die speeldag horen zichtbaar worden. Als er vervolgens weer op een sluit.gif gedrukt wordt moeten alle <tr>'s weer verdwijnen.

Ik heb al meerdere scripts gezien die hier erg op lijken, maar werken meestal met divs of spans en ik heb gewoon niet genoeg kennis om dit om te schrijven :(.

Iemand die kan helpen?

Mvg,
Niels

P.s als de vraagstelling niet duidelijk is hoor ik dat graag.
 
Nou, je kan met javascript en css aardig ver komen.


[JS]function toggle(elementID)
{
var obj = document.getElementById(elementID);
if(obj.style.display == 'none' || obj.style.display == '')
{
obj.style.display = 'block';
}else{
obj.style.display = 'none';
}
}[/JS]
en html/css:
HTML: 
<div id='bla' style='width: 100px; height: 100px; border: 1px dotted #f06;'>test</div>

<a href='#' onclick='toggle("bla");'>klik hier eens? (en daarna nog eens)</a>
(even een voorbeeldje.)
 
HTML: 
<html>
<head>
<script>
function toggle(elementID)
{
   var obj = document.getElementById(elementID);
   if(obj.style.display == 'none' || obj.style.display == '')
   {
      obj.style.display = 'block';
   }else{
      obj.style.display = 'none';
   }
}
</script>
</head>

<body>

<table border="1">
<tr><th colspan="2"><a href='#' onclick='toggle("1");'>Niels</a></th></tr>
<tr id='1'><td>Niels</td><td>Menno</td></tr>
<tr><th colspan="2"><a href='#' onclick='toggle("2");'>Joost</a></th></tr>
<tr id='2'><td>Niels</td><td>Menno</td></tr>
<tr id='2'><td>Niels</td><td>Niels</td></tr>

</table>
</body>
</html>

In firefox 3.0 verspringt dit heel raar :S
Iemand die kan helpen?
 
Laatst bewerkt:
Als je nou eens van:

[JS]
obj.style.display = 'block';
[/JS]

dit:

[JS]
obj.style.display = 'table-row';
[/JS]

maakt?
 
dat werkte
Bedankt!!

Alleen werkt het niet met meerdere rows :(.
Suggesties?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan