get the parents with one click on a child element [see example]

Printable View

01-26-2007, 09:01 AM
gcmartijn

get the parents with one click on a child element [see example]

EDIT

Maybe I must ask it like this.

How is it possible to get the table width without getelmentbyID/Name
by clicking with the mouse on the text "some text for example".

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle" align="center"> <td bgcolor="#66FFFF"><b>some text for example</b></td> </tr> </table> <table width="34" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle" align="center"> <td bgcolor="#66FFFF"><b>bla bla a other table</b></td> </tr> </table>

below the old story.
----------------------

H!

I need a script to get the parents with one click on a child element.
I have found this to get a element with one mouseclick

function dosomething(e){
e.srcElement // here is the selected element.
}
document.onmousedown = function(){dosomething(event)}

Then whe have this html code for example.

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle" align="center"> <td bgcolor="#66FFFF"><b>some text for example</b></td> </tr> </table>

Now I press for example "some text for example" with my mouse.
Then I want to know who the parents are and return this in a for loop for example.

function dosomething(e){
for(object in e.srcElement.getallparents){
alert(object.TagName);
alert(ojbect.width);
}
}

b -
td -
tr -
table - 100% < - in this example the most outer parent

And now the not easy part: I can't use getElementById/TagName.

Thanks very much,
GCMartijn :)
01-26-2007, 04:51 PM
jscheuer1

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function getDocClick(e){ var getTableWidth=function(el){ var el=el? el : null; if(!el||!el.innerHTML||/</.test(el.innerHTML)) return null; while(el=el.parentNode) if(el.tagName&&el.tagName.toLowerCase()=='table') return el.width? el.width : el.style&&el.style.width? el.style.width : el.offsetWidth; return null; }, e=e? e : window.event, targ=e.target? e.target : e.srcElement; if(getTableWidth(targ)) alert(getTableWidth(targ)); } if ( typeof window.addEventListener != "undefined" ) document.addEventListener( "click", getDocClick, false ); else if ( typeof window.attachEvent != "undefined" ) document.attachEvent( "onclick", getDocClick ); else { if ( document.onclick != null ) { var oldOnclick = document.onclick; document.onclick = function ( e ) { oldOnclick( e ); getDocClick(e); }; } else document.onclick = getDocClick; } </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle" align="center"> <td bgcolor="#66FFFF"><b>some text for example</b></td> </tr> </table> <table width="34" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle" align="center"> <td bgcolor="#66FFFF"><b>bla bla a other table</b></td> </tr> </table> </body> </html>

Notes: Limited to actual text in the table, this is a feature. It can be altered to include the entire table by changing this:

Code:

if(!el||!el.innerHTML||/</.test(el.innerHTML))

to:

Code:

if(!el)

I expect there may be some questions. If so, feel free to ask.

Added later:

Also, if your object is to get the actual width (as an integer representing pixels) of the table, this:

Code:

return el.width? el.width : el.style&&el.style.width? el.style.width : el.offsetWidth;

should be:

Code:

return el.offsetWidth;
01-29-2007, 11:21 AM
gcmartijn

wow very cool ! I try this later today.