Adding an onclick event to a table row

Question

I m trying to add an onclick event to a table row through Javascript   function addRowHandlers         var table   document getElementById  tableId        var rows   table getElementsByTagName  tr        for  i   1  i  lt  rows length  i              row   table rows i           row onclick   function                              var cell   this getElementsByTagName  td   0                             var id   cell innerHTML                            alert  id     id                                      This works as expected in Firefox  but in Internet Explorer  IE8  I can t access the table cells  I believe that is somehow related to the fact that  this  in the onclick function is identified as  Window  instead of  Table   or something like that    If I could access the the current row I could perform a getElementById in the onclick function by I can t find a way to do that  Any suggestions

User · Answer

Head stuck in jq for too long  This will work   function addRowHandlers         var table   document getElementById  tableId        var rows   table getElementsByTagName  tr        for  i   1  i  lt  rows length  i              var row   table rows i           row onclick   function myrow                             return function                                   var cell   myrow getElementsByTagName  td   0                                var id   cell innerHTML                               alert  id     id                                                row

User · Answer

Here is a compact and a bit cleaner version of the same pure Javascript  not a jQuery  solution as discussed above by  redsquare and  SolutionYogi  re  adding onclick event handlers to all HTML table rows  that works in all major Web Browsers  including the latest IE11   function addRowHandlers         var rows   document getElementById  tableId   rows      for  i   0  i  lt  rows length  i              rows i  onclick   function    return function                   var id   this cells 0  innerHTML                 alert  id     id               rows i            window onload   addRowHandlers      Working DEMO  Note  in order to make it work in IE8 as well  instead of this pointer use the explicit identifier like function myrow  as suggested by  redsquare  Best regards

User · Answer

Here is how I do this   I create a table with a thead and tbody tags  And then add a click event to the tbody element by id    lt script gt      document getElementById  mytbody   click   clickfunc      function clickfunc e               to find what td element has the data you are looking for         var tdele   e target parentNode children x  innerHTML             to find the row         var trele   e target parentNode         lt  script gt   lt table gt       lt thead gt           lt tr gt               lt th gt Header 1 lt  th gt               lt th gt Header 2 lt  th gt           lt  tr gt       lt  thead gt       lt tbody id  mytbody  gt           lt tr gt  lt td gt Data Row lt  td gt  lt td gt 1 lt  td gt  lt  tr gt           lt tr gt  lt td gt Data Row lt  td gt  lt td gt 2 lt  td gt  lt  tr gt           lt tr gt  lt td gt Data Row lt  td gt  lt td gt 3 lt  td gt  lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

I was trying to select a table row  so that it can be easily copied to the clipboard and then pasted in Excel  Below is a small adaptation of your solution   References    Where I took the window prompt line from  Jarek Milewski       The user is presented with the prompt box  where the text to be copied is already selected     For selecting a complete table  Tim Down   Very interesting  but I was not able to adapt for a  lt tr gt  element       lt  DOCTYPE html gt   lt html gt   lt body gt    lt div gt       lt table id  tableId  border 1 gt         lt tbody gt           lt tr gt  lt td gt Item  lt b gt A1 lt  b gt  lt  td gt  lt td gt Item  lt b gt B1 lt  b gt  lt  td gt  lt  tr gt           lt tr gt  lt td gt Item  lt b gt A2 lt  b gt  lt  td gt  lt td gt Item  lt b gt B2 lt  b gt  lt  td gt  lt  tr gt           lt tr gt  lt td gt Item  lt b gt A3 lt  b gt  lt  td gt  lt td gt Item  lt b gt B3 lt  b gt  lt  td gt  lt  tr gt         lt  tbody gt       lt  table gt   lt  div gt    lt script gt  function addRowHandlers         var table   document getElementById  tableId        var rows   table getElementsByTagName  tr        for  i   0  i  lt  rows length  i              var currentRow   table rows i           var createClickHandler                function row                                 return function                                              var cell   row getElementsByTagName  td   0                                           var id   cell innerHTML                                           var cell1   row getElementsByTagName  td   1                                           var id2   cell1 innerHTML                                             alert id     -     id2                                           window prompt  Copy to clipboard  Ctrl C  Enter     lt table gt  lt tr gt  lt td gt     id     lt  td gt  lt td gt     id2     lt  td gt  lt  tr gt  lt  table gt                                                                currentRow onclick   createClickHandler currentRow           window onload   addRowHandlers     lt  script gt   lt  body gt   lt  html gt

User · Answer

While most answers are a copy of SolutionYogi s answer  they all miss an important check to see if  cell  is not null which will return an error if clicking on the headers  So  here is the answer with the check included         function addRowHandlers       var table   document getElementById  tableId      var rows   table getElementsByTagName  tr      for  i   0  i  lt  rows length  i          var currentRow   table rows i       var createClickHandler   function row          return function             var cell   row getElementsByTagName  td   0              check if not null         if  cell  return     no errors           var id   cell innerHTML          alert  id     id                       currentRow onclick   createClickHandler currentRow

User · Answer

Try changing the this getElementsByTagName  td   0   line to read row getElementsByTagName  td   0    That should capture the row reference in a closure  and it should work as expected   Edit  The above is wrong  since row is a global variable -- as others have said  allocate a new variable and then use THAT in the closure

User · Answer

Simple way is generating code as bellow    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   x000D   lt style gt  x000D    table  td   x000D        border 1px solid black  x000D      x000D   lt  style gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   lt p gt Click on each tr element to alert its index position in the table  lt  p gt  x000D   lt table gt  x000D     lt tr onclick  myFunction this   gt  x000D       lt td gt Click to show rowIndex lt  td gt  x000D     lt  tr gt  x000D     lt tr onclick  myFunction this   gt  x000D       lt td gt Click to show rowIndex lt  td gt  x000D     lt  tr gt  x000D     lt tr onclick  myFunction this   gt  x000D       lt td gt Click to show rowIndex lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt script gt  x000D    function myFunction x    x000D        alert  Row index is      x rowIndex   x000D      x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

My table is in another iframe so i modified SolutionYogi answer to work with that     lt script type  text javascript  gt  window onload   addRowHandlers  function addRowHandlers         var iframe   document getElementById  myiframe        var innerDoc    iframe contentDocument    iframe contentDocument   iframe contentWindow document       var table   innerDoc getElementById  mytable        var rows   table getElementsByTagName  tr        for  i   0  i  lt  rows length  i              var currentRow   table rows i           var createClickHandler                function row                                 return function                                              var cell   row getElementsByTagName  td   0                                           var id   cell innerHTML                                          alert  id     id                                                              currentRow onclick   createClickHandler currentRow            lt  script gt

User · Answer

I think for IE you will need to use the srcElement property of the Event object  if jQuery is an option for you  you may want to consider using it - as it abstracts most browser differences for you  Example jQuery       tableId tr   click function        alert   this  children  td   html

User · Answer

Something like this   function addRowHandlers       var table   document getElementById  tableId      var rows   table getElementsByTagName  tr      for  i   0  i  lt  rows length  i          var currentRow   table rows i       var createClickHandler   function row          return function             var cell   row getElementsByTagName  td   0           var id   cell innerHTML          alert  id     id                       currentRow onclick   createClickHandler currentRow           EDIT  Working demo

User · Answer

selectRowToInput    function selectRowToInput    var table   document getElementById  table    var rows   table getElementsByTagName  tr    for  var i   0  i  lt  rows length  i          var currentRow   table rows i       currentRow onclick   function             rows this rowIndex          console log rows

User · Answer

I try to figure out how to get a better result with pure JS and i get something this  DEMO  https   jsfiddle net f5r3emjt 1  const tbody   document getElementById  quot tbody quot    let rowSelected   tbody onclick    e    gt      for  let i   0  i  lt  e path length    i        if  e path i  tagName     quot TR quot           selectRow e path i          break                function selectRow r      if  rowSelected     undefined  rowSelected style backgroundColor    quot white quot      rowSelected   r    rowSelected style backgroundColor    quot dodgerblue quot      And now you can use the variable rowSelected in other function like you want or call another function after set the style

[javascript] Adding an onclick event to a table row

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to dom-events