Javascript / Client Side Development :: Change the color of an "a" child element inside a cell ?


	Change the color of an "a" child element inside a cell ? I want to change the color of an "a" child element inside a table cell via javascript. Is there any way to do that? Ps: there is no id assigned to child elements. I would like to discover the child element and change its color from the parent element if possible. <script type="text/javascript"> function HightLightCell(mycell, mybgcolor) { mycell.bgColor=mybgcolor; } </script><table width="200" border="0"> <tbody> <tr> <td onMouseOver="this.bgColor='#ffdd00'" onMouseOut="HightLightCell(this, '#0071bd')"><a class="BayWashWhitelink" href="#">Build and quote</a></td> </tr> <tr> <td bgcolor="#CCCC00" onMouseOver="this.bgColor='#ffdd00'" onMouseOut="HightLightParentCell(this, '#0071bd')"><a class="BayWashWhitelink" href="#">Service And Support</a></td> </tr> </tbody> </table> Rod rlueneb@gmail.com a crit : > I want to change the color of an "a" child element inside a table cell > via javascript. Is there any way to do that? The 1st link inside an element will be : myLink = element.getElementsByTagName('A')[0] or : myLink = element.firstChild; while(myLink.tagName.toLowerCase() != 'a') myLink = element.firstChild; > I would like to discover the child element > and change its color from the parent element if possible. its color (text) or its background ? myLink.style.color = 'red'; myLink.style.backgroundColor = 'yellow'; > <script type="text/javascript"> > function HightLightCell(mycell, mybgcolor) > { > mycell.bgColor=mybgcolor; > } function HightLightParentCell(mycell, mybgcolor) { mycell.getElementsByTagName('A')[0].style.backgroundColor=mybgcolor; } > </script><table width="200" border="0"> > <tbody> > <tr> > <td onMouseOver="this.bgColor='#ffdd00'" > onMouseOut="HightLightCell(this, '#0071bd')"><a > class="BayWashWhitelink" href="#">Build and quote</a></td> > </tr> > <tr> > <td bgcolor="#CCCC00" onMouseOver="this.bgColor='#ffdd00'" > onMouseOut="HightLightParentCell(this, '#0071bd')"><a > class="BayWashWhitelink" href="#">Service And Support</a></td> > </tr> > </tbody> > </table> -- Stephane Moriaux et son (moins) vieux Mac dj dpass Stephane Moriaux and his (less) old Mac already out of date On May 10, 8:09 am, ASM <stephanemoriaux.NoAd@wanadoo.fr.invalid> wrote: > rlueneb@gmail.com a crit : > > I want to change the color of an "a" child element inside a table cell > > via javascript. Is there any way to do that? > The 1st link inside an element will be : > myLink = element.getElementsByTagName('A')[0] > or : > myLink = element.firstChild; > while(myLink.tagName.toLowerCase() != 'a') myLink = element.firstChild; Seems to me that may well result in an infinite loop - the firstChild (if there is one) is always the same element. I think you meant to loop over the childNodes until you found the first A element - but getElementsByTagName is likely much faster and more concise: var firstLink = element.getElementsByTagName('A')[0]; if (myLink) { /do stuff / } -- Rob Thanks, works like a charm: <script type="text/javascript"> function HightLightParentCell(mycell, mybgcolor) { mycell.bgColor=mybgcolor; var link = mycell.getElementsByTagName('a')[0]; link.className='BayWashBluelink'; } </script>