How can I find the name of the parent table from a table cell?

Discussion in 'Javascript' started by jklimek@gmail.com, Jun 21, 2005.

  1. Guest

    I have something like this:

    <table name="test" id="test">
    <tr>
    <td><input type="button" onClick="showMeParentTableName();"></td>
    </tr>
    </table>


    How can I have my input button show me the table of it's parent table?
    (eg. "test" in this case)
    , Jun 21, 2005
    #1
    1. Advertising

  2. Guest

    err, I mean... how can I have the button show me the NAME of it's
    parent table.
    , Jun 21, 2005
    #2
    1. Advertising

  3. try this;

    <table name="test" id="test">
    <tr>
    <td><input type="button"
    onClick="showMeParentTableName(this);"></td>
    </tr>
    </table>

    <script>
    function showMeParentTableName(oInput){
    this.value =
    this.parentNode.parentNode.parentNode.parentNode.name;
    }
    </script>

    notice that you must go up 4 levels in the object hierarchy;

    input -> cell -> row -> tablebody -> table

    this only applies to IE, firefox needs one less step up.
    michael elias, Jun 21, 2005
    #3
  4. Mick White Guest

    wrote:


    >
    > How can I have my input button show me the table of it's parent table?
    > (eg. "test" in this case)
    >

    ....
    <td><input type="button" onClick="climbTo(this,'table')"></td>
    ....

    <script type="text/javascript">
    function climbTo(element,tagname){
    var pa=element.parentNode;
    while(pa.tagName.toLowerCase()!=tagname.toLowerCase()){
    pa=pa.parentNode;
    }
    alert(pa.name)
    }
    </script>

    Mick
    Mick White, Jun 21, 2005
    #4
  5. RobB Guest

    wrote:
    > I have something like this:
    >
    > <table name="test" id="test">
    > <tr>
    > <td><input type="button" onClick="showMeParentTableName();"></td>
    > </tr>
    > </table>
    >
    >
    > How can I have my input button show me the table of it's parent table?
    > (eg. "test" in this case)


    "name" is not a valid attribute of an HTML table. Use id. Pass the
    input object to the function.

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">

    function getTableId(obj)
    {
    while (obj && !/table/i.test(obj.nodeName))
    {
    obj = obj.parentNode;
    }
    return obj.id || '';
    }

    </script>
    </head>
    <body>
    <table border="1" id="test1">
    <tbody>
    <tr>
    <td>
    <input
    type="button"
    value="test 1"
    onclick="alert(getTableId(this))">
    </td>
    </tr>
    </tbody>
    </table>
    <table border="1" id="test2">
    <tbody>
    <tr>
    <td>
    <input
    type="button"
    value="test 2"
    onclick="alert(getTableId(this))">
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>


    michael elias wrote:
    > try this;


    (snip)

    > function showMeParentTableName(oInput){
    > this.value =
    > this.parentNode.parentNode.parentNode.parentNode.name;
    > }


    'this' in the context of a global function points to *window*.


    > notice that you must go up 4 levels in the object hierarchy;
    >
    > input -> cell -> row -> tablebody -> table
    >
    > this only applies to IE, firefox needs one less step up.


    Any time you need to give involved instructions like the above, it's
    time to use some program logic to *look for* the desired data.
    RobB, Jun 21, 2005
    #5
  6. Grant Wagner Guest

    "Mick White" <> wrote in message
    news:r4Yte.47364$...
    > wrote:
    >
    >
    >> How can I have my input button show me the table of it's parent
    >> table?
    >> (eg. "test" in this case)
    >>

    > ...
    > <td><input type="button" onClick="climbTo(this,'table')"></td>
    > ...
    >
    > <script type="text/javascript">
    > function climbTo(element,tagname){
    > var pa=element.parentNode;
    > while(pa.tagName.toLowerCase()!=tagname.toLowerCase()){
    > pa=pa.parentNode;
    > }
    > alert(pa.name)
    > }
    > </script>


    If this function can't find the tagName it's looking for, it eventually
    generates an error:

    <span id="blah"></span>
    <script type="text/javascript">
    function climbTo(element,tagname){
    var pa=element.parentNode;
    while(pa.tagName.toLowerCase()!=tagname.toLowerCase()){
    pa=pa.parentNode;
    }
    alert(pa.name)
    }
    climbTo(document.getElementById('blah'), 'table');
    </script>

    Something like this might be better:

    function climbTo(element, tagname) {
    tagname = tagname.toLowerCase();
    var parentElement;
    while((element = element.parentNode) && !parentElement) {
    if (element.tagName.toLowerCase() == tagname) {
    parentElement = element;
    }
    }

    // return parentElement;
    if (parentElement) {
    alert(parentElement.id);
    }
    }

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jun 23, 2005
    #6
  7. Grant Wagner wrote:

    > If this function can't find the tagName it's looking for, it
    > eventually generates an error:
    > [...]
    > Something like this might be better:
    >
    > function climbTo(element, tagname) {
    > tagname = tagname.toLowerCase();
    > var parentElement;
    > while((element = element.parentNode) && !parentElement) {
    > if (element.tagName.toLowerCase() == tagname) {
    > parentElement = element;
    > }
    > }
    >
    > // return parentElement;
    > if (parentElement) {
    > alert(parentElement.id);
    > }
    > }


    I'd prefer RegExps here:

    function climbTo(element, tagname)
    {
    var rx = new RegExp(tagname, "i");
    var parentElement;
    while ((element = element.parentNode) && !parentElement)
    {
    if (element.tagName.test(rx))
    {
    parentElement = element;
    }
    }

    // return parentElement;
    if (parentElement)
    {
    alert(parentElement.id);
    }
    }


    PointedEars
    Thomas 'PointedEars' Lahn, Jul 10, 2005
    #7
  8. Thomas 'PointedEars' Lahn <> writes:

    > I'd prefer RegExps here:
    >
    > function climbTo(element, tagname)
    > {
    > var rx = new RegExp(tagname, "i");


    You should at least anchor the match, i.e.,
    var rx = new RegExp("^"+tagname+"$", "i");

    Otherwise tagnames that are substrings of other tag names can
    give incorrect matches (which will probably not happen for valid
    HTML, but might as well be safe).

    ....
    > if (element.tagName.test(rx))
    > {
    > parentElement = element;
    > }

    ....
    > if (parentElement)


    I'm not sure the original poster had thought this through enough for
    it to be generalized. This code will find the outermost enclosing
    element matching the tag name, not the innermost one. That might be
    desired behavior in this case, but in general, I'd more likely be
    needing the nearest enclosing element.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 11, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Phillip Roncoroni
    Replies:
    14
    Views:
    1,061
    Toby A Inkster
    Apr 5, 2004
  2. Empire City
    Replies:
    3
    Views:
    386
    Empire City
    Apr 30, 2004
  3. Don Hans

    find datagrid item cell by ID (name)

    Don Hans, Dec 20, 2003, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    115
    Don Hans
    Dec 20, 2003
  4. Replies:
    6
    Views:
    144
  5. Bitswapper
    Replies:
    5
    Views:
    110
    Prasad, Ramit
    Aug 27, 2013
Loading...

Share This Page