Get a particular cell value from HTML table using JavaScript

Question

I want to get each cell value from an HTML table using JavaScript when pressing submit button   How to get HTML table cell values

User · Accepted Answer

To get the text from this cell-    lt table gt       lt tr id  somerow  gt           lt td gt some text lt  td gt                   lt  tr gt   lt  table gt    You can use this -   var Row   document getElementById  somerow    var Cells   Row getElementsByTagName  td    alert Cells 0  innerText

User · Answer

You can get cell value with JS even when click on the cell                                   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   I told you just in case you ll want to use it because I searched a lot for it and I found questions like mine  But now I found out from teacher so I post where people asked    The example is working I ve seen

User · Answer

Just simply    sometime when larger table we can t add the id to each tr        lt table gt           lt tr gt               lt td gt some text lt  td gt               lt td gt something lt  td gt           lt  tr gt           lt tr gt               lt td gt Hello lt  td gt               lt td gt Hel lt  td gt           lt  tr gt       lt  table gt        lt script gt          var cell   document getElementsByTagName  td             var i   0          while cell i     undefined               alert cell i  innerHTML     do some alert for test             i                   end while      lt  script gt

User · Answer

Here is perhaps the simplest way to obtain the value of a single cell   document querySelector   table   children 0  children r  children c  innerText   where r is the row index and c is the column index  Therefore  to obtain all cell data and put it in a multi-dimensional array   var tableData         Array from document querySelector   table   children 0  children  forEach function tr  tableData push Array from tr children  map cell   gt  cell innerText       var cell   tableData 1  2    2nd row  3rd column   To access a specific cell s data in this multi-dimensional array  use the standard syntax  array rowIndex  columnIndex

User · Answer

function Vcount     var modify   document getElementById  C name1   value  var oTable   document getElementById  dataTable    var i  var rowLength   oTable rows length  for  i   1  i  lt  rowLength  i          var oCells   oTable rows item i  cells      if  modify    oCells 0  firstChild data            document getElementById  Error   innerHTML        duplicate value           return false          break

User · Answer

var table   document getElementById  someTableID     var totalRows   document getElementById  someTableID   rows length  var totalCol   3     enter the number of columns in the table minus 1  first column is 0 not 1    To display all values for  var x   0  x  lt   totalRows  x          for  var y   0  y  lt   totalCol  y              alert table rows x  cells y  innerHTML              To display a single cell value enter in the row number and column number under rows and cells below  var firstCell   table rows 0  cells 0  innerHTML  alert firstCell     Note   if you use  lt th gt  this will be row 0  so your data will start at row 1 col 0

User · Answer

lt td class  virtualTd  onclick  putThis this   gt my td value  lt  td gt   function putThis control         alert control innerText

User · Answer

You can also use the DOM way to obtain the cell value   Cells 0  firstChild data  Read more on that in my post at http   js-code blogspot com 2009 03 how-to-change-html-table-cell-value html

User · Answer

Make a javascript function  function addSampleTextInInputBox message          set value in input box     document getElementById  textInput   value   message             or show an alert       window alert message       Then simply call in your table row button click   lt td class  center  gt       lt a class  btn btn-success  onclick  addSampleTextInInputBox   lt  php echo  row- gt message    gt     title  Add  data-toggle  tooltip  title  Add  gt           lt span class  fa fa-plus  gt  lt  span gt       lt  a gt   lt  td gt

User · Answer

I found this as an easiest way to add row   The awesome thing about this is that it doesn t change the already present table contents even if it contains input elements      row     lt tr gt  lt td gt  lt input type  text  gt  lt  td gt  lt  tr gt       table body tr last   after row      Here  table body is the id of the table body tag

[javascript] Get a particular cell value from HTML table using JavaScript

Examples related to javascript

Examples related to html