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

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

  1. jklimek

    jklimek 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)
     
    jklimek, Jun 21, 2005
    #1
    1. Advertisements

  2. jklimek

    jklimek Guest

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

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

    Mick White Guest

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

    RobB Guest

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


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

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

    Grant Wagner Guest

    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, Jun 23, 2005
    #6
  7. 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. 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).

    ....
    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, Jul 11, 2005
    #8
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.