get row number in table

Discussion in 'Javascript' started by Roderik, Nov 2, 2004.

  1. Roderik

    Roderik Guest

    Hi,

    I have a table like this:

    <table id="myTable">
    <tr><td>text</td><td>text</td></tr>
    <tr><td>text</td><td>text</td></tr>
    ...
    <tr><td>text</td><td>text</td></tr>
    </table>

    Now I want to add a javascript to the page that informs me of which row
    I have clicked. If I click the second row it should fire an alert with
    "You clicked row: 2". I don't want to add javascript inside the html of
    the table.

    Regards,

    Roderik
    Roderik, Nov 2, 2004
    #1
    1. Advertising

  2. On Tue, 02 Nov 2004 03:37:10 +0100, Roderik <> wrote:

    [snip]

    > Now I want to add a javascript to the page that informs me of which row
    > I have clicked.


    That's fairly simple. The code below adds a click event listener to each
    row in the "myTable" table. If the user clicks anywhere inside a row, the
    click event will "bubble up" to the containing row.

    > If I click the second row it should fire an alert with "You clicked row:
    > 2".


    Just to point out: the rowIndex property used in the showRowNum() inner
    function yields a zero-order index. That is, the second row will have the
    index number, 1, hence the "+1" in the code.

    > I don't want to add javascript inside the html of the table.


    That's OK. Call addRowListeners once the table has been parsed, either in
    a SCRIPT element placed after the closing TABLE tag or, as in this
    example, once the document has loaded.

    function addRowListeners() {
    /* Use this function as a common event listener for each row. */
    function showRowNum() {
    /* Check that the rowIndex property is
    * supported before trying to use it.
    */
    if('number' == typeof this.rowIndex) {
    alert('You clicked row: ' + (this.rowIndex + 1));
    }
    }
    /* Check that the getElementById method is
    * supported before trying to use it.
    */
    if(document.getElementById) {
    /* Change the string, 'myTable', to reflect the actual id. */
    var table = document.getElementById('myTable'), rows;
    /* Ensure a reference was obtained and
    * that we can access the rows.
    */
    if(table && (rows = table.rows)) {
    /* Add the listener to each row in the table. */
    for(var i = 0, n = rows.length; i < n; ++i) {
    rows.onclick = showRowNum;
    }
    }
    }
    }

    <body ... onload="addRowListeners();">

    Untested, but should work. Hope it helps,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 2, 2004
    #2
    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. Anon
    Replies:
    2
    Views:
    912
    Jukka K. Korpela
    Mar 18, 2005
  2. phl
    Replies:
    1
    Views:
    4,319
    Martin Jay
    Jun 8, 2006
  3. D
    Replies:
    0
    Views:
    192
  4. Replies:
    1
    Views:
    121
  5. Replies:
    3
    Views:
    155
Loading...

Share This Page