Avatar billede ravnborg Nybegynder
23. september 2008 - 19:06 Der er 8 kommentarer og
2 løsninger

Ændre tabelfarve ved klik

Hvordan laver man det sådan, at et felt i en tabel skifter farve når man klikker på det.
Klikker man en gang til, skal feltet skifte tilbage igen.
Avatar billede w13 Novice
23. september 2008 - 19:20 #1
<td style="background-color:green" onclick="if(!bColor){this.style.backgroundColor='red';bColor=true;}else{this.style.backgroundColor='green';bColor=false;}">Tekst</td>
Avatar billede olebole Juniormester
23. september 2008 - 19:25 #2
<ole>

Det vil nok være meget godt at sætte et lokalt 'flag' på elementet, så koden kan genbruges på flere elementer. Prøv:

<script type="text/JavaScript>"
function setCol(oElm) {
    var bClicked = oElm.getAttribute("clicked")=="true";
    if (bClicked) {
        oElm.style.backgroundColor = "#ff0";
        oElm.setAttribute("clicked", "true");
    } else {
        oElm.style.backgroundColor = "#fff";
        oElm.setAttribute("clicked", "false");
    }
}
</script>

    <td onclick="setCol(this)">Tekst</td>

/mvh
</bole>
Avatar billede ravnborg Nybegynder
23. september 2008 - 20:21 #3
Jeg kan ikke få nogen af dem til at virke.

w13: Der sker ikke noget når jeg klikker i feltet. Jeg får fejlen bcolor er ikke defineret

olebole: Jeg kan få den til at skifte farve når jeg klikker på feltet, men jeg kan ikke få den til at skifte tilbage igen.
Avatar billede zips Juniormester
24. september 2008 - 00:05 #4
Måske kan dette bruges

<script type="text/javascript">
function toggle(it) {
  if ((it.style.backgroundColor == "none") || (it.style.backgroundColor == ""))
    {it.style.backgroundColor = "yellow";}
  else
    {it.style.backgroundColor = "";}
}
</script>
<table><tr>
<td onclick="toggle(this);">Tekst</td>
</tr></table>

Fundet her http://www.webdeveloper.com/forum/showpost.php?s=6a8eccf3fef49578dcb11a4ff8651221&p=921419&postcount=2
Avatar billede w13 Novice
24. september 2008 - 09:30 #5
ravnborg>> Det er fordi bColor skal var'es et sted.
Avatar billede olebole Juniormester
24. september 2008 - 14:25 #6
Ikke i mit tilfælde. Jeg havde bare byttet om på true og false  =)
Dette er testet (du skifter naturligvis selv farverne til dine egne):

<script type="text/JavaScript">
function setCol(oElm) {
    var bClicked = oElm.getAttribute("clicked")=="true";
    if (bClicked) {
        oElm.style.backgroundColor = "#ff0";
        oElm.setAttribute("clicked", "false");
    } else {
        oElm.style.backgroundColor = "#fff";
        oElm.setAttribute("clicked", "true");
    }
}
</script>
Avatar billede ravnborg Nybegynder
25. september 2008 - 21:55 #7
Det ender med at jeg bruger oleboles forslag, da jeg først fik det til at virke samt at jeg kan genbruge koden.

Så opret bare et svar olebole.

Ellers skal I have tak for at bruge tid på at hjælpe mig.

ravnborg
Avatar billede olebole Juniormester
25. september 2008 - 22:11 #8
Jeg har intet mod at dele  =)
Avatar billede w13 Novice
27. september 2008 - 12:57 #9
Tak for point! :)
Avatar billede olebole Juniormester
27. september 2008 - 13:41 #10
Tak for points  =)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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