01. juli 2004 - 20:10Der er
21 kommentarer og 1 løsning
Onmouseover på én td, får hele tr til at skifte baggrund
Hej eksperter, Jeg har en masse tabelrækker med 2 celler i hver. Det er sådan, at hele TR'en, ved OnMouseOver på en af TD'erne, skal skifte baggrund. Grunden til, jeg ikke bare har sat OnMouseOver på TRen er, at teksten i én af TD'erne samtidig skal skifte farve, og det kan man, mig bekendt, ikke gøre uden et navn. Er der en måde, ligesom med forms, at alle felterne har en plads i et array, fx med forms, (document.forms[0].fields[2] (1. form på siden, 3. felt i den form))?
Lige en ting mere: Hvis nu jeg har en celle til venstre, og jeg gerne vil have noget ændret i cellen til højre (tekstfarve), hvordan kan jeg så gøre det?
<table> <tr onmouseover="this.style.backgroundColor='#ccc';this.firstChild.style.color='green'" onmouseout="this.style.backgroundColor='#eee';this.firstChild.style.color='black'" style="background-color:#eee;"> <td>Her er en tekst, som skifter farve</td> <td>Denne tekst skifter ikke farve</td> </tr> </table>
Spændende. Hvad så, hvis det er cellen til højre, der har teksten, der skal skifte. Så kan man vel ikke bare lave "firstchild", vel? Er der et array, fx child[], som har alle TD'er under en TR?
Hov! Nej den er da ej! Prøv at se dette eksempel i Mozilla:
<table> <tr onmouseover="this.style.backgroundColor='#ccc';this.childNodes[1].style.color='green'" onmouseout="this.style.backgroundColor='#eee';this.childNodes[1].style.color='black'" style="background-color:#eee;"> <td>Her er en tekst, som skifter farve</td> <td>Denne tekst skifter ikke farve</td> </tr> </table>
Det er da den venstre, hvis tekstfarve bliver ændret. Hvad er den rigtige løsning?
I andre sammenhænge har IE en ideosynkrasi om at betragte linjeskift i html-kode som noget, når vi kommer til childNodes er det åbenbart Mozilla ,-(
Prøv i een linje:
<table><tr onmouseover="this.style.backgroundColor='#ccc';this.childNodes[1].style.color='yellow'" onmouseout="this.style.backgroundColor='#eee';this.childNodes[1].style.color='black'" style="background-color:#eee;"><td>Denne tekst skifter ikke farve</td><td>Her er en tekst, som skifter farve</td></tr></table>
--og det skulle ikke være så svært at smide det som funktion, så du kan have alle dine rækker reagerende, som du vil:
<script type="text/javascript"> function trOver(tr){ tr.style.backgroundColor='#aaa'; tr.childNodes[1].style.color='yellow'; } function trOut(tr,bgcol){ tr.style.backgroundColor=bgcol; tr.childNodes[1].style.color='black'; } </script> <table> <tr onmouseover="trOver(this)" onmouseout="trOut(this,'#eee')" style="background-color:#eee;"><td>Denne tekst skifter ikke farve</td><td>Her er en tekst, som skifter farve</td></tr> <tr onmouseover="trOver(this)" onmouseout="trOut(this,'#ddd')" style="background-color:#ddd;"><td>Denne tekst skifter ikke farve</td><td>Her er en tekst, som skifter farve</td></tr> <tr onmouseover="trOver(this)" onmouseout="trOut(this,'#eee')" style="background-color:#eee;"><td>Denne tekst skifter ikke farve</td><td>Her er en tekst, som skifter farve</td></tr> <tr onmouseover="trOver(this)" onmouseout="trOut(this,'#ddd')" style="background-color:#ddd;"><td>Denne tekst skifter ikke farve</td><td>Her er en tekst, som skifter farve</td></tr> </table>
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.