Avatar billede s0mmer Nybegynder
05. marts 2009 - 10:06 Der er 9 kommentarer og
1 løsning

Javascript og td class

Hej eksperter,

Jeg har et javascript som jeg godt kunne tænke mig lavede min class om i et td tag.

Eks:
<td class="off"></td>

Kan jeg få mit javascript til at ændre dettte off til on eks? evt vha. et id eller lign?
Avatar billede windcape Praktikant
05. marts 2009 - 10:10 #1
Den property du leder efter hedder "className".

<td class="off" onclick="this.className = 'on'">test</td>
Avatar billede s0mmer Nybegynder
05. marts 2009 - 10:12 #2
windcape > Ja det lyder sådan. Men det skal ikke ske ved klik på td tagget.. Det er en javascript funktion og i den skal den ændre det. Altså noget med document.getElementById, kan du hjælpe?
Avatar billede windcape Praktikant
05. marts 2009 - 10:14 #3
Ja, du skal jo finde det korrekt DOM Objekt du ønsker at ændre på.

Hvis du vil gøre det per id, skal du jo give din TD et id. Ellers skal du have et ID på et parent-element og så iterate over dens child-elements.

Det er sådan lidt op til dig selv hvordan du vil gøre det.

Hvis du skal have hjælp med det, skal du være meget mere specific i dit spørgsmål.
Avatar billede s0mmer Nybegynder
05. marts 2009 - 10:15 #4
windcape > Man kunne også sagtens bruge dit eksempel.. Men lad os sige jeg har 3 td tags med din kode.. Så vil jeg jo gerne have at når jeg går fra en fane til en anden fane, at de andre går tilbage til class="off", kan du følge mig?
Avatar billede windcape Praktikant
05. marts 2009 - 10:22 #5
Nu et mit javascript lidt rusten, men noget i stil med dette her:

function switchTab(tabElm)
{
    var tr = tabElm.parentNode;
    for(int i=0;i<tr.childNodes.length;i++)
    {
        tr.childNodes[i].className = 'off';
    }
   
    tabElm.className = 'on',
}

og så

<tr>
  <td class="off" onclick="switchTab(this)">Tab 1</td>
  <td class="off" onclick="switchTab(this)">Tab 2</td>
  <td class="off" onclick="switchTab(this)">Tab 3</td>
</tr>

Dog skal du bemærke at parentNode afhænger af om der er whitespace eller i i Mozilla baserede browserer.

Du skal have fat i jQuery eller lign. for at kunne hånterer dette her ordenligt.
Avatar billede fennec Nybegynder
05. marts 2009 - 10:25 #6
Skulle det ikke på onmouseover og onmouseout i stedet:
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">DATA</td>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">DATA</td>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">DATA</td>
Avatar billede windcape Praktikant
05. marts 2009 - 10:27 #7
Det afhænger vel af hvad der skal foregå :)

Personligt ville jeg benytte extjs til at sætte op tabs.
Avatar billede s0mmer Nybegynder
05. marts 2009 - 10:41 #8
windcape > Jeg fandt ud af det med din hjælp. Jeg takker mange gange, smid et svar og du får points :)
Avatar billede windcape Praktikant
05. marts 2009 - 11:39 #9
hookay
Avatar billede olebole Juniormester
05. marts 2009 - 15:58 #10
<ole>

- men skift af CSS-klasse performer meget ofte helt elendigt, hvorfor Microsoft da også fraråder dén teknik. Skift i stedet de enkelte style properties på elementet.

Brug evt. sidste eksempel i:
    http://www.eksperten.dk/guide/227

/mvh
</bole>
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