Avatar billede jackass- Nybegynder
05. februar 2007 - 08:37 Der er 10 kommentarer og
1 løsning

Farveskift på table rows ved onmouseover og out

Hej,

Jeg har en tabel hvor der er 5 celler i hver række med tekst;

<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Jeg vil gerne have at baggrundsfarven på hver række ændres når jeg holder musen over dem, er det muligt?

Mvh
/jack
Avatar billede madeindk Nybegynder
05. februar 2007 - 08:52 #1
<tr onMouseOver="this.bgColor='#000000';" onMouseOut="this.bgColor='';">
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Avatar billede jackass- Nybegynder
05. februar 2007 - 09:34 #2
Det synes jeg ikke rigtigt der virker? :/
Avatar billede jensgram Nybegynder
05. februar 2007 - 09:43 #3
<tr onmouseover="this.style.backgroundColor='#00ff00';" onmouseout="this.style.backgroundColor='ff0000';">
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

?
Avatar billede jackass- Nybegynder
05. februar 2007 - 10:03 #4
Det virker på <td> men ikke på <tr> .. det er meningen at det er hele rækken der skal blive "highlighted". Kan det lade sig gøre? :)
Avatar billede sw_red_6 Nybegynder
05. februar 2007 - 10:11 #5
jeg bruger selv det her og det virker i hvert fald i IE:
<tr onMouseOver="this.bgColor='#bdbdbd';" onMouseOut ="this.bgColor='#DADADA'">
Avatar billede jackass- Nybegynder
05. februar 2007 - 10:31 #6
Hmm skummelt.. Hvis jeg bare laver det som statisk dumt HTML, så virker det fint:

<tr onMouseOver="this.bgColor='#bdbdbd';" onMouseOut ="this.bgColor='#FFFFFF'">

Men hvis jeg output'er det med PHP således;

echo "<tr onMouseOver=\"this.bgColor='#bdbdbd';\" onMouseOut =\"this.bgColor='#FFFFFF'\">\n";

..så virker det ikke?!? Og jeg har "view source"'et siden, som viser nøjagtigt det samme uanset om det er den statiske eller PHP output'ede, nemlig;

<tr onMouseOver="this.bgColor='#bdbdbd';" onMouseOut ="this.bgColor='#FFFFFF'">

Nogen der har en idé om hvorfor? :O
Avatar billede windcape Praktikant
05. februar 2007 - 10:35 #7
jensgrams løsning er det mest korrekte, problemet er bare at IE ikke har support for styles på TR elementer, så løsning er at bruge en lille nem funktion.

function changeTRcolor(tr,color) {
    var TDs = tr.getElementsByTagName('td');
    for(var i=0;i<TRs.length;i++) {
        TDs[i].style.background = color;
    }
}

og så

<tr onMouseOver="changeTRcolor(this,'#bdbdbd');" onMouseOut ="changeTRcolor(this,'#FFFFFF');">

din PHP har forresten INTET med emnet at gøre.
Avatar billede Slettet bruger
05. februar 2007 - 11:20 #8
Er det noget i den retning du leder efter?
http://webfab.dk/trae_cykling_links.asp
Avatar billede jackass- Nybegynder
06. februar 2007 - 09:24 #9
Lige løgnagtigt :)

Men alle ovenstående eksempler virkede faktisk - årsagen til at jeg i første omgang ikke kunne få det til at virke, var tilsyneladende fordi jeg i forvejen brugte CSS classes på TD'erne. Efter at have omgået disse fungerer det nu.

Det er sådan lidt ømt at fordele blot 30 point på så mange - nogen utilfredse hvis jeg bare giver til den første der sender et svar? :)

Mange tak for hjælpen
Avatar billede jensgram Nybegynder
06. februar 2007 - 10:30 #10
Det vil vel være mest rimeligt at tildele point til den løsning du valgte ;)
Avatar billede windcape Praktikant
12. februar 2007 - 06:49 #11
note til jensgram: Gætter på du har opgraderet til IE7? Du lader nemlig til at glemme IE6s forskelle i javascript/CSS i mange af dine besvarelser :-)

Bare lige være opmærksom på det.
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