How to get html table td cell value by JavaScript

Question

I have an HTML table created with dynamic data and cannot predict the number of rows in it  What I want to do is to get the value of a cell when a row is clicked  I know to use td onclick but I do not know how to access the cell value in the Javascript function   The value of the cell is actually the index of a record and it is hidden in the table  After the record key is located I can retrieve the whole record from db   How to get the cell value if I do not know the row index and column index of the table that I clicked

User · Answer

Don t use in-line JavaScript  separate your behaviour from your data and it gets much easier to handle  I d suggest the following   var table   document getElementById  tableID        cells   table getElementsByTagName  td     for  var i 0 len cells length  i lt len  i         cells i  onclick   function            console log this innerHTML              if you know it s going to be numeric          console log parseInt this innerHTML  10                         x000D   x000D  var table   document getElementById  tableID    x000D    cells   table getElementsByTagName  td    x000D   x000D  for  var i   0  len   cells length  i  lt  len  i      x000D    cells i  onclick   function     x000D      console log this innerHTML   x000D       x000D    x000D  th  x000D  td   x000D    border  1px solid  000  x000D    padding  0 2em 0 3em 0 1em 0 3em  x000D    x000D   lt table id  tableID  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Column heading 1 lt  th gt  x000D         lt th gt Column heading 2 lt  th gt  x000D         lt th gt Column heading 3 lt  th gt  x000D         lt th gt Column heading 4 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt 43 lt  td gt  x000D         lt td gt 23 lt  td gt  x000D         lt td gt 89 lt  td gt  x000D         lt td gt 5 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 4 lt  td gt  x000D         lt td gt 3 lt  td gt  x000D         lt td gt 0 lt  td gt  x000D         lt td gt 98 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 10 lt  td gt  x000D         lt td gt 32 lt  td gt  x000D         lt td gt 7 lt  td gt  x000D         lt td gt 2 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    JS Fiddle proof-of-concept   A revised approach  in response to the comment  below       You re missing a semicolon  Also  don t make functions within a loop    This revision binds a  single  named function as the click event-handler of the multiple  lt td gt  elements  and avoids the unnecessary overhead of creating multiple anonymous functions within a loop  which is poor practice due to repetition and the impact on performance  due to memory usage    function logText           this  is automatically passed to the named      function via the use of addEventListener         later     console log this textContent         using a CSS Selector  with document querySelectorAll      to get a NodeList of  lt td gt  elements within the  tableID element  var cells   document querySelectorAll   tableID td        iterating over the array-like NodeList  using    Array prototype forEach   and Function prototype call    Array prototype forEach call cells  function td         the first argument of the anonymous function  here   td        is the element of the array over which we re iterating        adding an event-handler  the function logText  to handle      the click events on the  lt td gt  elements    td addEventListener  click   logText          x000D   x000D  function logText     x000D    console log this textContent   x000D    x000D   x000D  var cells   document querySelectorAll   tableID td    x000D   x000D  Array prototype forEach call cells  function td    x000D    td addEventListener  click   logText   x000D      x000D  th  x000D  td   x000D    border  1px solid  000  x000D    padding  0 2em 0 3em 0 1em 0 3em  x000D    x000D   lt table id  tableID  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Column heading 1 lt  th gt  x000D         lt th gt Column heading 2 lt  th gt  x000D         lt th gt Column heading 3 lt  th gt  x000D         lt th gt Column heading 4 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt 43 lt  td gt  x000D         lt td gt 23 lt  td gt  x000D         lt td gt 89 lt  td gt  x000D         lt td gt 5 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 4 lt  td gt  x000D         lt td gt 3 lt  td gt  x000D         lt td gt 0 lt  td gt  x000D         lt td gt 98 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 10 lt  td gt  x000D         lt td gt 32 lt  td gt  x000D         lt td gt 7 lt  td gt  x000D         lt td gt 2 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    JS Fiddle proof-of-concept   References    Array prototype forEach    document getElementById    document getElementsByTagName    document querySelectorAll    EventTarget addEventListener    Function prototype call

User · Answer

I gave the table an id so I could find it  On onload  when the page is loaded by the browser   I set onclick event handlers to all rows of the table  Those handlers alert the content of the first cell    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script gt              var p                     onload  function                         var rows   document getElementById  mytable   rows                      for var i   0  ceiling   rows length  i  lt  ceiling  i                              rows i  onclick   function                                 alert this cells 0  innerHTML                                                                                             lt  script gt       lt  head gt       lt body onload  p onload    gt           lt table id  mytable  gt               lt tr gt                   lt td gt 0 lt  td gt                   lt td gt row 1 cell 2 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 1 lt  td gt                   lt td gt row 2 cell 2 lt  td gt               lt  tr gt           lt  table gt           lt  body gt   lt  html gt

User · Answer

lt head gt        lt title gt Search students by courses professors lt  title gt        lt script type  text javascript  gt       function ChangeColor tableRow  highLight               if  highLight              tableRow style backgroundColor    00CCCC                 else           tableRow style backgroundColor    white                       function DoNav theUrl        document location href   theUrl         lt  script gt    lt  head gt   lt body gt         lt table id    c  width  180  border  1  cellpadding  0  cellspacing  0  gt                lt   for  Course cs   courses     gt                lt tr onmouseover  ChangeColor this  true                     onmouseout  ChangeColor this  false                     onclick  DoNav  http   localhost 8080 Mydata ComplexSearch FoundS jsp courseId  lt   cs getCourseId    gt      gt                     lt td name    title  align    center  gt  lt    cs getTitle     gt  lt  td gt                lt  tr gt              lt     gt                             lt  body gt    I wrote the HTML table in JSP  Course is is a type  For example Course cs  cs  object of type Course which had 2 attributes  id  title  courses is an ArrayList of Course objects   The HTML table displays all the courses titles in each cell  So the table has 1 column only  Course1 Course2 Course3        Taking aside    onclick  DoNav  http   localhost 8080 Mydata ComplexSearch FoundS jsp courseId  lt   cs getCourseId    gt        This means that after user selects a table cell  for example  Course2   the title of the course-  Course2  will travel to the page where the URL is directing the user  http   localhost 8080 Mydata ComplexSearch FoundS jsp     Course2  will arrive in FoundS jsp page  The identifier of  Course2  is courseId  To declare the variable courseId  in which CourseX will be kept  you put a     after the URL and next to it the identifier  It works

User · Answer

You can use    lt td onclick  javascript someFunc this    gt  lt  td gt    With passing this you can access the DOM object via your function parameters

User · Answer

This is my solution  var cells   Array prototype slice call document getElementById  tableI   getElementsByTagName  td     for var i in cells       console log  My contents is       cells i  innerHTML

[javascript] How to get html table td cell value by JavaScript?

Examples related to javascript

Examples related to html-table

Examples related to cell