Cell click reveals row number

Discussion in 'Javascript' started by Camet, Jul 5, 2006.

  1. Camet

    Camet Guest

    I have a table with a dynamic number of rows and cells. From the
    nature of the script I am writing, I cannot use IDs.

    Each row has from 1 to 3 cells. Javascript tables have cells[] and
    rows[].

    cells [] is an array of all the cells of the table, supposedly 1D.
    rows [] is an array of all the rows of the table. You can grab the
    cells from the row click.

    I wish to go the other way

    Is there any way to find out what row was clicked on by the mouse when
    the left most cell is clicked but the script ignores the rest of the
    cells in the row.
    Camet, Jul 5, 2006
    #1
    1. Advertising

  2. Camet

    Matt Kruse Guest

    Camet wrote:
    > Is there any way to find out what row was clicked on by the mouse
    > when the left most cell is clicked but the script ignores the rest of
    > the cells in the row.


    You can just go up the parentNode chain from whatever was clicked until you
    find a TR.
    Then, look at the TR's rowIndex property.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jul 5, 2006
    #2
    1. Advertising

  3. Camet

    Camet Guest

    > You can just go up the parentNode chain from whatever was clicked until you
    > find a TR.
    > Then, look at the TR's rowIndex property.
    >
    > --
    > Matt Kruse
    > http://www.JavascriptToolbox.com
    > http://www.AjaxToolbox.com


    I do not know what you mean by parentNode in relation to tables. I
    have only used those in relation to reading xml files.
    Camet, Jul 6, 2006
    #3
  4. Camet

    Evertjan. Guest

    Camet wrote on 06 jul 2006 in comp.lang.javascript:

    >> You can just go up the parentNode chain from whatever was clicked
    >> until you find a TR.
    >> Then, look at the TR's rowIndex property.
    >>
    >> --
    >> Matt Kruse
    >> http://www.JavascriptToolbox.com
    >> http://www.AjaxToolbox.com

    >
    > I do not know what you mean by parentNode in relation to tables. I
    > have only used those in relation to reading xml files.
    >
    >


    In DOM like in any other tree structure,
    all elements exept the root["global"]
    have a parent[node].

    DOM elements are nearly people, who have two.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Jul 6, 2006
    #4
  5. Camet

    Camet Guest

    > In DOM like in any other tree structure,
    > all elements exept the root["global"]
    > have a parent[node].
    >
    > DOM elements are nearly people, who have two.
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)


    Okay, can you please give an example of this in commented code?

    Thanks

    Camet
    Camet, Jul 6, 2006
    #5
  6. "Camet" <> writes:

    > I do not know what you mean by parentNode in relation to tables. I
    > have only used those in relation to reading xml files.


    The XML files are probably read into a W3C DOM structure. The same
    thing happens with HTML in a browser, and there is a ECMAScript
    binding for the DOM objects and methods that specifies how to use
    it:
    <URL:http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

    In this case, you can do something like:

    function findRowNumber(element) { // element is a descendent of a tr element
    while(element.tagName.toLowerCase() != "tr") {
    element = element.parentNode; // breaks if no "tr" in path to root
    }
    return element.rowIndex;
    }

    and call it when clicking on the table:

    <table
    onclick="doSomethingWith(findRowNumber(event.target||event.srcElement));">
    ...
    </table>

    /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 6, 2006
    #6
  7. Camet

    Evertjan. Guest

    Lasse Reichstein Nielsen wrote on 06 jul 2006 in comp.lang.javascript:

    > "Camet" <> writes:
    >
    >> I do not know what you mean by parentNode in relation to tables. I
    >> have only used those in relation to reading xml files.

    >
    > The XML files are probably read into a W3C DOM structure. The same
    > thing happens with HTML in a browser, and there is a ECMAScript
    > binding for the DOM objects and methods that specifies how to use
    > it:
    > <URL:http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
    >
    > In this case, you can do something like:
    >
    > function findRowNumber(element) { // element is a descendent of a tr
    > element
    > while(element.tagName.toLowerCase() != "tr") {
    > element = element.parentNode; // breaks if no "tr" in path to
    > root
    > }
    > return element.rowIndex;
    > }
    >
    > and call it when clicking on the table:
    >
    > <table
    > onclick="doSomethingWith(findRowNumber(event.target||event.srcElemen
    > t));"> ...
    > </table>


    In IE HTML I simply do:

    <table border=1>
    <tr><td onclick='whichRowandCell(this)'>aaaaa
    <td onclick='whichRowandCell(this)'>bbbbb
    <tr><td onclick='whichRowandCell(this)'>cccc
    <td onclick='whichRowandCell(this)'>ddd
    </table>

    <script type='text/javascript'>
    function whichRowandCell(x){
    alert('rowIndex: '+x.parentNode.rowIndex+
    '\ncellIndex: '+x.cellIndex)
    }
    </script>

    Should one expect a element between the tr and the td?
    I think not.




    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Jul 6, 2006
    #7
  8. "Evertjan." <> writes:

    > Should one expect a element between the tr and the td?
    > I think not.


    Not in valid HTML, no. If you put the onclick on the table and use
    event.target (with IE fallback to event.srcElement), then you might
    need to traverse upwards to find the cell and row (but on the other
    hand, you should also remember, as I didn't, the case where you click
    on the table between rows.

    /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 6, 2006
    #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. funfly3

    Re: Jessica Reveals all "Again"

    funfly3, May 11, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    313
    funfly3
    May 12, 2007
  2. Thomasa Gregg
    Replies:
    1
    Views:
    146
    Eliyahu Goldin
    Jun 9, 2004
  3. Michael Conroy

    Riddle me this... RBL strikes again. Min USENET clue reveals noth

    Michael Conroy, Feb 10, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    97
    Michael Conroy
    Feb 11, 2005
  4. Todd Benson

    ObjectSpace reveals order?

    Todd Benson, Sep 29, 2007, in forum: Ruby
    Replies:
    4
    Views:
    110
    Todd Benson
    Sep 30, 2007
  5. Replies:
    2
    Views:
    285
    Rick Johnson
    Dec 25, 2012
Loading...

Share This Page