table and onClick

Discussion in 'Javascript' started by B. P. TBC, Apr 1, 2006.

  1. B. P. TBC

    B. P. TBC Guest

    Hi all!

    I have a html-document with a table. How can I recognise in the onClick
    event-handler, that I which cell of a table clicked?

    P.
    B. P. TBC, Apr 1, 2006
    #1
    1. Advertising

  2. B. P. TBC

    Guest

    You have to set the onclick event of the TD tags, not the TABLE itself.
    You can do this in a loop, for efficiency:

    var myTblCells =
    document.getElementById("myTable").getElementsByTagName("td");
    for (var t=0,curCell; curCell=myTblCells[t]; t++)
    curCell.onclick = someFunction;

    The above code is IE-specific, of course -- you'll want to generalize
    it to support modern browsers. The someFunction code tells you where
    you are:

    function someFunction()
    {
    alert("I'm in row " + this.rowIndex + ", cell " + this.cellIndex);
    }

    Hope this helps,

    Stan Scott
    New York City
    , Apr 1, 2006
    #2
    1. Advertising

  3. B. P. TBC

    B. P. TBC Guest

    Thanks!

    P.
    B. P. TBC, Apr 1, 2006
    #3
  4. B. P. TBC wrote:

    > I have a html-document with a table. How can I recognise in the onClick
    > event-handler, that I which cell of a table clicked?


    Use Event Bubbling.
    <URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>

    <script type="text/javascript">
    function handleClick(e)
    {
    var t;
    if (e && ((t = e.target) || (t = e.srcElement)))
    {
    ... t ...
    }
    }
    </script>

    <table onclick="handleClick(event);">
    ...
    </table>


    PointedEars
    Thomas 'PointedEars' Lahn, Apr 1, 2006
    #4
  5. wrote:

    > You have to set the onclick event of the TD tags, not the TABLE itself.


    Not at all.

    > You can do this in a loop, for efficiency:
    >
    > var myTblCells =
    > document.getElementById("myTable").getElementsByTagName("td");
    > for (var t=0,curCell; curCell=myTblCells[t]; t++)
    > curCell.onclick = someFunction;
    >
    > The above code is IE-specific, of course [...]


    It is not, and it is unnecessary. The `click' event bubbles by default
    in all implementations.


    PointedEars
    Thomas 'PointedEars' Lahn, Apr 1, 2006
    #5
  6. B. P. TBC

    RobG Guest

    Thomas 'PointedEars' Lahn wrote:
    > B. P. TBC wrote:
    >
    >
    >>I have a html-document with a table. How can I recognise in the onClick
    >>event-handler, that I which cell of a table clicked?

    >
    >
    > Use Event Bubbling.
    > <URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>
    >
    > <script type="text/javascript">
    > function handleClick(e)
    > {
    > var t;


    var e = e || window.event;

    > if (e && ((t = e.target) || (t = e.srcElement)))
    > {
    > ... t ...
    > }
    > }
    > </script>
    >
    > <table onclick="handleClick(event);">
    > ...
    > </table>
    >
    >
    > PointedEars



    --
    Rob
    RobG, Apr 2, 2006
    #6
  7. RobG wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> B. P. TBC wrote:
    >>> I have a html-document with a table. How can I recognise in the onClick
    >>> event-handler, that I which cell of a table clicked?

    >>
    >> Use Event Bubbling.
    >>

    <URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>
    >>
    >> <script type="text/javascript">
    >> function handleClick(e)
    >> {
    >> var t;

    >
    > var e = e || window.event;


    Unnecessary:

    >> if (e && ((t = e.target) || (t = e.srcElement)))
    >> {
    >> ... t ...
    >> }
    >> }
    >> </script>
    >>
    >> <table onclick="handleClick(event);">

    ^^^^^
    >> ...
    >> </table>



    PointedEars
    Thomas 'PointedEars' Lahn, Apr 2, 2006
    #7
    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. Corno
    Replies:
    2
    Views:
    22,145
    Eliyahu Goldin
    Sep 5, 2004
  2. Corno

    Code behind and onclick on html table row

    Corno, Sep 3, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    147
    Eliyahu Goldin
    Sep 5, 2004
  3. bob
    Replies:
    3
    Views:
    179
  4. Replies:
    2
    Views:
    242
  5. Replies:
    4
    Views:
    166
Loading...

Share This Page