Reference other td

[JC]

hi all

First of all, sorry for my (bad) english,

I have a javascript:

<script type="text/javascript">
<!--
function gointo(td,color ){td.style.curs or='default';td .bgColor=color; }
function gooutoff(td,col or){td.style.cu rsor='default'; td.bgColor=colo r;}
//-->
</script>

and I reference this code in this way:

<td width="7" bgcolor="#AA000 0"></td>
<td width="145"BGCO LOR="#AA0000" onMouseOver="go into(this,'8000 00');"
onMouseOut="goo utoff(this,'aa0 000');" class="myclass" >
<a class="myclass" href="page.php" >page</a></td>
<td width="5" bgcolor="#AA000 0"></td>

to change background's color of second td when the mouse is over this td.
That's ok. But, how i can reference other td (no "this"). I need to change
also the first td and the last td.. Can i do this?

thanks for advance.

[Cenekemoi]

Re: Reference other td

Bonjour à JC <dont@write.m e> qui nous a écrit :[color=blue]
> hi all
>
> First of all, sorry for my (bad) english,
>
> I have a javascript:
>
> <script type="text/javascript">
> <!--
> function
> gointo(td,color ){td.style.curs or='default';td .bgColor=color; }
> function
> gooutoff(td,col or){td.style.cu rsor='default'; td.bgColor=colo r;} //-->
> </script>
>
> and I reference this code in this way:
>
> <td width="7" bgcolor="#AA000 0"></td>
> <td width="145"BGCO LOR="#AA0000" onMouseOver="go into(this,'8000 00');"
> onMouseOut="goo utoff(this,'aa0 000');" class="myclass" >
> <a class="myclass" href="page.php" >page</a></td>
> <td width="5" bgcolor="#AA000 0"></td>
>
> to change background's color of second td when the mouse is over this
> td. That's ok. But, how i can reference other td (no "this"). I need
> to change also the first td and the last td.. Can i do this?
>
> thanks for advance.[/color]

for exemple :

<script type="text/javascript">
function chgColor(obj,co lor){
obj.style.curso r='default';
obj.bgColor=col or;
}
function gointo(td, color){
chgColor(td, color);
chgColor(docume nt.getElementBy Id("td1"), color);
chgColor(docume nt.getElementBy Id("td2"), color);
}
function gooutoff(td, color){
chgColor(td, color);
chgColor(docume nt.getElementBy Id("td1"), color);
chgColor(docume nt.getElementBy Id("td2"), color);
}
</script>

and I reference this code in this way:

<td width="7" bgcolor="#AA000 0" id="td1"></td>
<td width="145"BGCO LOR="#AA0000" onMouseOver="go into(this,'8000 00');"
onMouseOut="goo utoff(this,'aa0 000');" class="myclass" >
<a class="myclass" href="page.php" >page</a></td>
<td width="5" bgcolor="#AA000 0" id="td2"></td>

--
Cordialement, Thierry ;-)

[Ivo]

Re: Reference other td

"JC" <dont@write.m e> wrote[color=blue]
> <script type="text/javascript">
> <!--[/color]

Hiding from older browsers like <!-- this //--> is no longer necessary these
days. All known browsers know about the script tag (whether they execute it
is another matter).
[color=blue]
> function gointo(td,color ){td.style.curs or='default';td .bgColor=color; }
> function gooutoff(td,col or){td.style.cu rsor='default'; td.bgColor=colo r;}[/color]

I may be stating the obvious here, but those two functions are exactly the
same!
[color=blue]
> //-->
> </script>
>
> and I reference this code in this way:
>
> <td width="7" bgcolor="#AA000 0"></td>
> <td width="145"BGCO LOR="#AA0000" onMouseOver="go into(this,'8000 00');"
> onMouseOut="goo utoff(this,'aa0 000');" class="myclass" >
> <a class="myclass" href="page.php" >page</a></td>
> <td width="5" bgcolor="#AA000 0"></td>
>
> to change background's color of second td when the mouse is over this td.
> That's ok. But, how i can reference other td (no "this"). I need to change
> also the first td and the last td.. Can i do this?[/color]

Funnily enough, with "this". Namely "this.lastSibli ng" is the first td (in
this case) and "this.nextSibli ng" the last. Even, "this.parentNod e" is the
tr in which all td's all contained. If you use these DOM expressions there
is no need to give each table cell its own id.

function gointo(td,color ){
if (td.nextSibling ) // if td is the last in a row, there is no next
td.nextSibling. style.backgroun d="#"+color;
// or change whole tr
td.parentNode.s tyle.background ="#"+color;
}
HTH
Ivo

[Michael Winter]

Re: Reference other td

On Fri, 9 Apr 2004 18:25:52 +0200, Ivo <no@thank.you > wrote:

[snip]
[color=blue]
> Funnily enough, with "this". Namely "this.lastSibli ng" is the first[/color]

DOM nodes don't have a lastSibling property. What you're thinking of is
Node.previousSi bling, and possibly getting confused with Node.lastChild.
[color=blue]
> td (in this case) and "this.nextSibli ng" the last. Even,[/color]

In all likelihood, you'll find that Node.previousSi bling and
Node.nextSiblin g refer to text nodes, not elements. If the HTML is
structured with no whitespace (of any kind) between elements, then
elements will be continuous.
[color=blue]
> "this.parentNod e" is the tr in which all td's all contained. If you use
> these DOM expressions there is no need to give each table cell its own
> id.
>
> function gointo(td,color ){
> if (td.nextSibling ) // if td is the last in a row, there is no next
> td.nextSibling. style.backgroun d="#"+color;
> // or change whole tr
> td.parentNode.s tyle.background ="#"+color;
> }[/color]

To the OP: use the following functions to find the first, last and "other"
TD elements

/* Searches the given element's siblings for the
first occurance of a specific type of element.
If a matching node cannot be found, null is
returned.

ref - node reference from which the search will begin
type - name of a HTML element (in uppercase)
*/
function getNextElement( ref, type ) {
var node = ref;

while( node && ( type != node.nodeName )) {
node = node.nextSiblin g;
}
return node;
}

/* Works in exactly the same way as getNextElement( ),
except for the direction of the search.
*/
function getPreviousElem ent( ref, type ) {
var node = ref;

while( node && ( type != node.nodeName )) {
node = node.previousSi bling;
}
return null;
}

/* Searches the given element's children for the
first occurance of a specific type of element.
If a matching node cannot be found, null is
returned.

ref - node reference
type - name of a HTML element (in uppercase)
*/
function getFirstElement ( parent, type ) {
var node = null;

if( parent.firstChi ld ) {
node = parent.firstChi ld;
} else if( parent.childNod es ) {
node = parent.childNod es[ 0 ];
}
return getNextElement( node, type );
}

/* Searches the given element's children for the
last occurance of a specific type of element.
If a matching node cannot be found, null is
returned.

ref - node reference
type - name of a HTML element (in uppercase)
*/
function getLastElement( parent, type ) {
var node = null;

if( parent.lastChil d ) {
node = parent.lastChil d;
} else if( parent.childNod es ) {
node = parent.childNod es[ parent.childNod es.length - 1 ];
}
return getPreviousElem ent( node, type );
}

Ivo's gointo() replacement would then look like this:

function gointo( td, colour ) {
var next = getNextElement( td, 'TD' );

if( next && next.style ) {
next.style.back groundColor = colour;
}
}

To set the first TD, you could add:

var first = getFirstElement ( td.parentNode, 'TD' );

if( first && first.style ) {
first.style.bac kgroundColor = colour;
}

and similarly for the last TD.

Hope that helps,
Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Ivo]

Re: Reference other td

"Michael Winter" said[color=blue]
> Ivo wrote:[color=green]
> > this.lastSiblin g...[/color]
>
> DOM nodes don't have a lastSibling property. What you're thinking of
> is Node.previousSi bling[/color]

Oops, yes, thank you.
[color=blue]
> In all likelihood, you'll find that Node.previousSi bling and
> Node.nextSiblin g refer to text nodes, not elements. If the HTML is
> structured with no whitespace (of any kind) between elements, then
> elements will be continuous.[/color]

Again thanks, I should 've thought of that. But it 's so silly. What in the
name of goodwill would have made the browser bakers think that we would have
a use for those empty nodes? Here is how to remove empty text nodes and make
the various DOMs a bit more compatible:

function removeemptytext nodes(node) {
if( !node ) node=document.b ody;
for (var x = 0; x < node.childNodes .length; x++) {
var child = node.childNodes[x];
if ((child.nodeTyp e == 3)&&(!/\S/.test(child.nod eValue))) {
node.removeChil d(node.childNod es[x]);
x--;
} else if (child.nodeType == 1) {
removeemptytext nodes(child);
}
}
}
removeemptytext nodes();

Running this function may hopefully simplify some other code...
Ivo

[Lasse Reichstein Nielsen]

Re: Reference other td

[color=blue]
> Again thanks, I should 've thought of that. But it 's so silly. What in the
> name of goodwill would have made the browser bakers think that we would have
> a use for those empty nodes?[/color]

If you want to unparse the DOM and get the same code back, you need
the newlines. The DOM was not made for HTML only, but for general
documents, and some browser writers follow the DOM more precisely than
others :)
[color=blue]
> } else if (child.nodeType == 1) {[/color]

You might also want to check against nodeType==9 (DOCUMENT_NODE) , as
it can also have element nodes as children.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'