Change the color of an "a" child element inside a cell ?

[rlueneberg]

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

 

[ASM]

(e-mail address removed) 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;
}

 

[RobG]

(e-mail address removed) 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 */ }

 

[rlueneberg]

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>