Notifikationer

Markér alle som læst Log ud

Slettet bruger

01. august 2008 - 17:17 Der er 12 kommentarer og
3 løsninger

Få tabel til at udvide sig ved klik på link

Hej

Jeg har denne tabel:
<table width="570" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="30" valign="middle" height="14"> </td>
<td width="60" valign="middle"><strong>Dag</strong></td>
<td width="80" valign="middle"><strong>Dato</strong></td>
<td width="50" valign="middle"><strong>Kl.</strong></td>
<td width="350" valign="middle"><strong>Aktivitet</strong></td>
</tr>
<tr style="background-color: #dddddd;">
<td valign="top" height="14"> </td>
<td valign="top"><a name="1"></a>Søndag</td>
<td valign="top">03-08-2008</td>
<td valign="top">14:00</td>
<td valign="top">Træningskamp mod Helsted Fremad IF (2)</td>
</tr>
<tr >
<td valign="top" height="14"> </td>
<td valign="top"><a name="2"></a>Onsdag</td>
<td valign="top">06-08-2008</td>
<td valign="top">18:30</td>
<td valign="top">Træning på Søndermarksskolen</td>
</tr>
</table>

Nogen der kan fortælle hvad jeg skal gøre, for at en tabellinie kan folde sig ud?

Eksempel:
Brugeren ser følgende:
Træningskamp mod Helsted Fremad IF (2) +

Når brugeren trykker på plusset, ser vedkommende dette:
Træningskamp mod Helsted Fremad IF (2)

Beskrivelse:
Træningskampen spilles på Helsted/Fremads baner. Husk at møde op 45 minutter før kampstart.

Ønskes et lift, kan du møde op på Søndermarksskolen kl. 13:00.

Synes godt om

w13 Novice

01. august 2008 - 18:46 #1

F.eks. sådan her:

<script type="text/javascript">
function toggleDisplay(o1,o2){
o1.style.display=(o1.style.display!="block"?"block":"none");
o2.firstChild.nodeValue=(o2.firstChild.nodeValue!="+"?"+":"-");
}
</script>

<table width="570" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="30" valign="middle" height="14"> </td>
<td width="60" valign="middle"><strong>Dag</strong></td>
<td width="80" valign="middle"><strong>Dato</strong></td>
<td width="50" valign="middle"><strong>Kl.</strong></td>
<td width="350" valign="middle"><strong>Aktivitet</strong></td>
</tr>
<tr style="background-color: #dddddd;">
<td valign="top" height="14"> </td>
<td valign="top"><a name="1"></a>Søndag</td>
<td valign="top">03-08-2008</td>
<td valign="top">14:00</td>
<td valign="top">Træningskamp mod Helsted Fremad IF (2) <span style="cursor:pointer" onclick="toggleDisplay(document.getElementById('td1'),this)">+</span></td>
</tr>
<tr id="td1" style="display:none">
<td valign="top" height="14"> </td>
<td valign="top"><a name="2"></a>Onsdag</td>
<td valign="top">06-08-2008</td>
<td valign="top">18:30</td>
<td valign="top">Træning på Søndermarksskolen</td>
</tr>
</table>

Synes godt om

Slettet bruger

01. august 2008 - 19:54 #2

Løsningen fungerer fint i IE, men fungerer ikke i Firefox overhovedet.

Nogen løsning på dette?

Synes godt om

w13 Novice

01. august 2008 - 20:07 #3

Det virker fint hos mig. Siger fejlkonsollen noget?

Synes godt om

w13 Novice

01. august 2008 - 20:09 #4

Testet med en HTML 4.01 Strict-doctype.

Synes godt om

Slettet bruger

01. august 2008 - 20:12 #5

Jeg har Firefox 2.0.016

Du kan se min implementering her:
http:// b91 . tkdc . dk /sider /kalender.php

Synes godt om

mclemens Nybegynder

01. august 2008 - 20:23 #6

Du har   efter +'et i din span og glemt at afslutte
<tr class="grey" id="td1" style="display:none"> med </tr>

Synes godt om

Slettet bruger

01. august 2008 - 20:28 #7

Begge fejl er rettet, men det er stadigvæk det samme.

Underlig at w3c.org ikke fandt den manglende </tr>.

Synes godt om

mclemens Nybegynder

01. august 2008 - 20:53 #8

tr er ikke et "block" element som sådan, men et table-row
element ... idet IE ikke understøtter table-row kan vi ikke
definere det til table-row og FF understøtter ikke tildeling
af display til block element (det er det der giver fejlen)

- Men vi kan sætte den til display ""...

<script type="text/javascript">
function toggleDisplay(o1,o2){
o1.style.display=o1.style.display!="none"?"none":o2.style.display;
o2.firstChild.nodeValue=(o2.firstChild.nodeValue!="+"?"+":"-");
}
</script>

Synes godt om

mclemens Nybegynder

01. august 2008 - 20:53 #9

Ups:

<script type="text/javascript">
function toggleDisplay(o1,o2){
o1.style.display=o1.style.display!="none"?"none":"";
o2.firstChild.nodeValue=(o2.firstChild.nodeValue!="+"?"+":"-");
}
</script>

Synes godt om

Slettet bruger

01. august 2008 - 22:57 #10

Super, så virker det.

w13 og mclemens -> Læg et svar og der er point på vej.
Er 50/50 en ok fordeling?

Synes godt om

w13 Novice

01. august 2008 - 23:57 #11

Fint med mig. =)

Synes godt om

mclemens Nybegynder

02. august 2008 - 01:28 #12

Har det helt ok med en 50/50 også :)

Hvis du skal bruge funktionen mange steder kan du evt. forkorte markup en bette smule ved at sige:

<script type="text/javascript">
function toggleDisplay(o1,o2){
o1=document.getElementById(o1).style;
o1.display=o1.display!="none"?"none":"";
o2.firstChild.nodeValue=(o2.firstChild.nodeValue!="+"?"+":"-");
}
</script>

og så kalde med onclick="toggleDisplay('td1', this)"
hvor td1 udskiftes med id på tr elementet der skal vises

Synes godt om

w13 Novice

02. august 2008 - 11:27 #13

Tak for point! :)

Synes godt om

mclemens Nybegynder

02. august 2008 - 11:46 #14

Tak for point også :)

Synes godt om

Slettet bruger

03. august 2008 - 19:58 #15

Selv tak. Tak for hjælpen :O)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	3	27/04/202620:09	I går 21:05
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS