Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:10 Der 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))?
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:12 #1
Rettelse: document.forms[0].elements[2].. Undskyld.
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:13 #2
du kan gøre sådan:

<td onmouseover="this.parentNode.style.backgroundColor='red'" onmouseover="this.parentNode.style.backgroundColor='blue'">txt</td>
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:14 #3
du kan oz hente alle tr's ind i et array med:

trArray=document.getElementsByTagName("TR");
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:19 #4
Tusind tusind tak, mm12010. Jeg havde kun brug for dit første eksempel, og det virker lige som jeg ville have det.
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:19 #5
Smid bare et svar, hvis du vil have points.
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:19 #6
selv tak :o)
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:26 #7
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?
Avatar billede roenving Novice
01. juli 2004 - 20:26 #8
<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>
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:29 #9
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?
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:30 #10
- Ja, det var der..
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:31 #11
children[], hvis nogen skulle være interesserede.
Avatar billede roenving Novice
01. juli 2004 - 20:32 #12
-- som er ie-only, men du kan bare bruge childNodes, den skulle du overalt !-)
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:36 #13
Tusind, tusind, tusind tak.
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:48 #14
øhh... er det kun mig der ikke får nogen mails?
Avatar billede jchillerup Nybegynder
01. juli 2004 - 20:48 #15
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?
Avatar billede roenving Novice
01. juli 2004 - 20:52 #16
Noget mærkværdigt noget ...

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>
Avatar billede roenving Novice
01. juli 2004 - 20:53 #17
<table></table> behøver ikke være med, så du kan godt placere dine table-rows hver for sig ...
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:55 #18
og så må det vel være childNodes[0] og childNodes[1] i stedet for [1] og [1]
Avatar billede mm12010 Nybegynder
01. juli 2004 - 20:56 #19
tosse herfra - glem det ;-)
Avatar billede jchillerup Nybegynder
01. juli 2004 - 21:08 #20
LANGT om længe virker det! Mange tak.
Avatar billede roenving Novice
01. juli 2004 - 21:14 #21
--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>
Avatar billede jchillerup Nybegynder
01. juli 2004 - 22:13 #22
- det har jeg gjort. Tusind tak for hjælpen.
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