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

**gcmartijn** · 01-26-2007, 09:01 AM

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&#37;" 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

**jscheuer1** · 01-26-2007, 04:51 PM

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&#37;" 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;

**gcmartijn** · 01-29-2007, 11:21 AM

wow very cool ! I try this later today.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions