|
| PORTAIL | ANNUAIRE | ARTICLES | COMPARATEUR HÉBERGEURS | DEVIS | FORUMS | RÉDUCTEUR D'URL |
|
09/04/2008, 09h56
|
#1 (permalink) |
Messages: n/a
Hébergeur: |
Change class problem
I want to change the color and text of a table cell when the cell is clicked.
Full code is below. Problem is that text changes but the color does not. When I run the code through Firefax Venkman debugger I see that the class is changed but why is not the class color changing to what the class has set? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;} td.onetype { background-color: #F1F1F1; border: 1px #000000 solid; } td.another { background-color: #F100F1; border: 1px #000000 solid; } --> </style> <script> function zub() { document.getElementById("one").parentNode.classNam e = "onetype"; document.getElementById("one").innerHTML="Works?"; } </script> </head> <body><table border="1" cellspacing="2" cellpadding="4" width="200"> <tr> <td class="another" id="one" onclick="zub()" width="20%"> Testing</td> </tr></table></body> </html> |
|
|
09/04/2008, 13h00
|
#2 (permalink) |
|
Messages: n/a
Hébergeur: |
Re: Change class problem
Test wrote:
> I want to change the color and text of a table cell when the cell is clicked. > Full code is below. > Problem is that text changes but the color does not. > When I run the code through Firefax Venkman debugger I see that the class is > changed but why is not the class color changing to what the class has set? > [snip] > td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: > #000000;} > td.onetype { > background-color: #F1F1F1; > border: 1px #000000 solid; > } [snip] > document.getElementById("one").parentNode.classNam e = "onetype"; > document.getElementById("one").innerHTML="Works?"; [snip] > <body><table border="1" cellspacing="2" cellpadding="4" width="200"> > <tr> > <td class="another" id="one" onclick="zub()" width="20%"> > Testing</td> > </tr></table></body> You're setting the class of the TD's *parent* and then expecting the result you'd get if you'd set the class of the TD itself. |
|
|
|
09/04/2008, 13h01
|
#3 (permalink) |
|
Messages: n/a
Hébergeur: |
Re: Change class problem
Test <test@.nil.invalid.com> writes:
> <html> <head> > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> > <style type="text/css"> > <!-- > td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: > #000000;} > td.onetype { > background-color: #F1F1F1; > border: 1px #000000 solid; > } > > td.another { > background-color: #F100F1; > border: 1px #000000 solid; > } > --> > </style> > <script> > function zub() > { > document.getElementById("one").parentNode.classNam e = "onetype"; ^^^ this changes the class of the <tr>, not the class of the <td> that you clicked on, and that's selected by the css above. > document.getElementById("one").innerHTML="Works?"; that will just delete the <td> alltogether. Try taking a look in the HTML view of firebug. -- Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/ |
|
|
|
09/04/2008, 13h06
|
#4 (permalink) |
|
Messages: n/a
Hébergeur: |
Re: Change class problem
Harlan Messinger <hmessinger.removethis@comcast.net> wrote:
>Test wrote: >> I want to change the color and text of a table cell when the cell is clicked. >> Full code is below. >> Problem is that text changes but the color does not. >> When I run the code through Firefax Venkman debugger I see that the class is >> changed but why is not the class color changing to what the class has set? >> >[snip] >> td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: >> #000000;} >> td.onetype { >> background-color: #F1F1F1; >> border: 1px #000000 solid; >> } >[snip] >> document.getElementById("one").parentNode.classNam e = "onetype"; >> document.getElementById("one").innerHTML="Works?"; >[snip] >> <body><table border="1" cellspacing="2" cellpadding="4" width="200"> >> <tr> >> <td class="another" id="one" onclick="zub()" width="20%"> >> Testing</td> >> </tr></table></body> > >You're setting the class of the TD's *parent* and then expecting the >result you'd get if you'd set the class of the TD itself. my bad. I looked, looked and looked but could not see the obvious. Thank you. |
|
|
|
09/04/2008, 14h51
|
#5 (permalink) |
|
Messages: n/a
Hébergeur: |
Re: Change class problem
Joost Diepenmaat wrote:
>> document.getElementById("one").parentNode.classNam e = "onetype"; > > ^^^ this changes the class of the <tr>, not the class of the <td> that > you clicked on, and that's selected by the css above. > >> document.getElementById("one").innerHTML="Works?"; > > that will just delete the <td> alltogether. Try taking a look in the > HTML view of firebug. No it won't. He didn't make the same mistake (using parentNode) on this line as on the previous line. |
|
|
|
09/04/2008, 15h17
|
#6 (permalink) |
|
Messages: n/a
Hébergeur: |
Re: Change class problem
Harlan Messinger <hmessinger.removethis@comcast.net> writes:
> Joost Diepenmaat wrote: >>> document.getElementById("one").parentNode.classNam e = "onetype"; >> >> ^^^ this changes the class of the <tr>, not the class of the <td> that >> you clicked on, and that's selected by the css above. >> >>> document.getElementById("one").innerHTML="Works?"; >> >> that will just delete the <td> alltogether. Try taking a look in the >> HTML view of firebug. > > No it won't. He didn't make the same mistake (using parentNode) on > this line as on the previous line. Ah, you're right. Sorry, I hadn't had my coffee when I posted that :-) -- Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/ |
|
|
 |
| Outils de la discussion | |
|
|
