RE: Traversing through DOM, identifying td's and manipulating

Mandy,

 The most common way I've seen to do what you're trying to do is to:

 1) Set every TD to the unhighlighted state then,
 2) Set the selected TD to the highlighted state.

 This avoids the problem of having to remember which was previously
selected.  Just change them all to the default state, then trigger the one
with the event.

 Something like this:

function mySelect (elm) {
	var tds = document.getElementsByTagName("td");
	for (var i=0; i < tds.length; i++) {
		tds[i].style.bgcolor = '#FFF';
		var imgs tds[i].getElementsByTagName("img");
		imgs[0].src = imgs[0].src.replace("_active","");
	}
	elm.style.bgcolor = '#305DAA';
	var elmImg elm.getElementsByTagName("img");
	elmImg[0].src = elmImg[0].src.replace("","_active");
}
...
<td style="background-color:#fff" onclick="mySelect(this)">

 Take this pseudo-code with a grain of salt.  It's only meant to explain the
idea, certainly not work.  Not even close.  ;)

Cheers!

-ryan

-----Original Message-----
From: [email protected] [mailto:[email protected]] On Behalf Of
Maninder, Singh
Sent: Wednesday, March 01, 2006 8:24 AM
To: [email protected]
Subject: [wdf-dom] Traversing through DOM, identifying td's and manipulating

Hi Everyone,

Just want to take some expert opinion on the following problem.

I have around 5-10 rows like mentioned below.

Each of them have the same bg color except the one that would be active.

So, what I want to do is that when a particular header is clicked, I want to
change the bgcolor's of the 2 td's and flip the src of the img in the first
td.

What would be the best way to do this as I want to traverse through the
tree, change the bgcolors and image of the one being clicked, but also
change the image&bgcolors of all the rest to make sure they are not
highlighted.

Help would be appreciated.

Thank you,
Mandy.

<ACTIVE>

<tr>
  <td bgcolor="#ffffff"><a href='#)'><img src="foo1_active.gif" border="0"
height="25" width="36"></a></td>
  <td bgcolor="#ffffff">&nbsp;<a href='#'><b>Foo1</b></a></td>
</tr>

</ACTIVE>

<tr>
  <td bgcolor="#305daa"><a href='#)'><img src="foo2.gif" border="0"
height="25" width="36"></a></td>
  <td bgcolor="#305daa">&nbsp;<a href='#'><b>Foo2</b></a></td>
</tr>


<tr>
  <td bgcolor="#305daa"><a href='#)'><img src="foo3.gif" border="0"
height="25" width="36"></a></td>
  <td bgcolor="#305daa">&nbsp;<a href='#'><b>Foo3</b></a></td>
</tr>


Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links



 





Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/