How to tell which row number is clicked in a table

Question

I have a table like the following    x000D   x000D   lt table gt  x000D      lt tr gt  x000D         lt td gt 1 lt  td gt  lt td gt 1 lt  td gt  lt td gt 1 lt  td gt  x000D      lt  tr gt  x000D      lt tr gt  x000D         lt td gt 2 lt  td gt  lt td gt 2 lt  td gt  lt td gt 2 lt  td gt  x000D      lt  tr gt  x000D      lt tr gt  x000D         lt td gt 3 lt  td gt  lt td gt 3 lt  td gt  lt td gt 3 lt  td gt  x000D      lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    When a user clicks on the table  how can I get the index of this row  tr element    For example  when I click on the first tr  with 1s in the above table   it should pick it up and return 1

User · Answer

tr   click function     alert     tr   index this           For first tr  it alerts 0  If you want to alert 1  you can add 1 to index

User · Answer

A better approach would be to delegate the event  which means catching it as it bubbles to the parent node   delegation - overview  This solution is both more robust and efficient   It allows the event to be handled even if more rows are dynamically added to the table later  and also results in attaching a single event handler to the parent node  table element   instead of one for each child node  tr element    Assuming that the OP s example is a simplified one  the table s structure can be more complex  for example    lt table id  indexedTable  gt               lt tr gt           lt td gt  lt p gt 1 lt  p gt  lt  td gt           lt td gt 2 lt  td gt           lt td gt  lt p gt 3 lt  p gt  lt  td gt       lt  tr gt   lt  table gt    Therefore  a simplistic approach such as getting e target parentElement will not work  as clicking the internal  lt p gt  and clicking the center  lt td gt  will produce different results   Using delegation normalizes the event handling  only assuming that there are no nested tables   implementation  Both of the following snippets are equivalent       indexedTable   delegate  tr    click   function e        console log   e currentTarget  index     1            indexedTable   on  click    tr   function e        console log   e currentTarget  index     1         They attach a listener to table element and handle any event that bubbles from the table rows  The current API is the on method and the delegate method is legacy API  and actually calls on behind the scenes    Note that the order of parameters to both functions is different   example  A comparison between direct handler attachment and delegation is available below or on jsFiddle    x000D   x000D      table-delegate   on  click    tr   function e    x000D    var idx     e currentTarget  index     1  x000D        delegation-idx   text idx     x000D    console log  delegated   idx   x000D      x000D   x000D      table-direct tr   on  click   function e    x000D    var idx     e currentTarget  index     1  x000D        direct-idx   text idx   x000D    console log  direct   idx   x000D      x000D   x000D      data-action add-row    click function e    x000D    var id   e target dataset table  x000D            id     tbody   x000D       append     lt tr gt  lt td gt extra lt  td gt  lt td gt extra lt  td gt  lt td gt extra lt  td gt  lt  tr gt    0   x000D      x000D  tr hover  x000D      background  ddd  x000D    x000D   x000D  button add-row   x000D      margin-bottom  5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt h1 gt Event handling test lt  h1 gt  x000D   lt p gt Add rows to both tables and see the difference in handling  lt  p gt  x000D   lt p gt Event delegation attaches a single event listener and events related to newly added children are caught  lt  p gt  x000D   lt p gt Direct event handling attaches an event handler to each child  where children added after the inital handler attachment don t have a handler attached to them  and therefore their indices won t be logged to console  lt  p gt  x000D   lt h2 gt Delegation lt  h2 gt  x000D   lt p gt  lt span gt row index   lt  span gt  lt span id  delegation-idx  gt unknown lt  span gt  lt  p gt  x000D   lt button class  add-row  data-action  add-row  data-table  table-delegate  gt Add row to delegation lt  button gt  x000D   lt table id  table-delegate  class  table  gt  x000D       lt tbody gt  x000D       lt tr gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D       lt  tr gt  x000D   x000D   lt  table gt  x000D   x000D   lt h2 gt Direct attachment lt  h2 gt  x000D   lt p gt  lt span gt row index   lt  span gt  lt span id  direct-idx  gt unknown lt  span gt  lt  p gt  x000D   lt button class  add-row  data-action  add-row  data-table  table-direct  gt Add row to direct lt  button gt  x000D   lt table id  table-direct  class  table  gt  x000D   lt tbody gt  x000D       lt tr gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt normal lt  td gt  x000D           lt td gt  lt p gt nested lt  p gt  lt  td gt  x000D       lt  tr gt  x000D       x000D   lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    Here s the demo on jsFiddle   P S   If you do have nested tables  or  in the general case  wish to delegate to elements with specific depth   you can use this suggestion from the jQuery bug report

User · Answer

This would get you the index of the clicked row  starting with one    x000D   x000D      thetable   find  tr   click  function    x000D  alert  You clicked row       this  index   1     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table id  thetable  gt  x000D      lt tr gt  x000D         lt td gt 1 lt  td gt  lt td gt 1 lt  td gt  lt td gt 1 lt  td gt  x000D      lt  tr gt  x000D      lt tr gt  x000D         lt td gt 2 lt  td gt  lt td gt 2 lt  td gt  lt td gt 2 lt  td gt  x000D      lt  tr gt  x000D      lt tr gt  x000D         lt td gt 3 lt  td gt  lt td gt 3 lt  td gt  lt td gt 3 lt  td gt  x000D      lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    If you want to return the number stored in that first cell of each row       thetable   find  tr   click  function      var row     this  find  td first   text      alert  You clicked     row

User · Answer

A simple and jQuery free solution   document querySelector   elitable   onclick   function ev          ev target  lt    td element       ev target parentElement  lt    tr    var index   ev target parentElement rowIndex      Bonus  It works even if rows are added removed dynamically

User · Answer

You can use object rowIndex property which has an index starting at 0      table tr   click function        alert  this rowIndex         See a working demo

User · Answer

In some cases we could have a couple of tables  and then we need to detect click just for particular table  My solution is this     lt table id  elitable  border  1  cellspacing  0  width  100   gt     lt tr gt    lt td gt 100 lt  td gt  lt td gt AAA lt  td gt  lt td gt aaa lt  td gt     lt  tr gt     lt tr gt   lt td gt 200 lt  td gt  lt td gt BBB lt  td gt  lt td gt bbb lt  td gt      lt  tr gt      lt tr gt   lt td gt 300 lt  td gt  lt td gt CCC lt  td gt  lt td gt ccc lt  td gt     lt  tr gt   lt  table gt         lt script gt        function                elitable tr   click function            alert  this rowIndex                            lt  script gt    DEMO

[javascript] How to tell which row number is clicked in a table?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to html-table

Examples related to dom-events