Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy 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&#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
    Last edited by gcmartijn; 01-26-2007 at 10:21 AM. Reason: better question

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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;
    Last edited by jscheuer1; 01-26-2007 at 05:03 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    wow very cool ! I try this later today.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •