PDA

View Full Version : 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".



<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.



<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
<!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:


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

to:


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:


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

should be:


return el.offsetWidth;

gcmartijn
01-29-2007, 11:21 AM
wow very cool ! I try this later today.