Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

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>
Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc