Getting value from table cell in JavaScript not jQuery

Question

I can t believe how long this has taken me but I can t seem to figure out how to extract a cell value from an HTML table as I iterate through the table with JavaScript   I am using the following to iterate     var refTab document getElementById  ddReferences     var  ttl       Loop through all rows and columns of the table and popup alert with the value       content of each cell    for   var i   0  row   refTab rows i   i            row   refTab rows i        for   var j   0  col   row cells j   j               alert col firstChild nodeValue                What is the correct call I should be putting in to the alert   call to display the contents of each cell of my HTML table   This should be in JS   can t use jQuery

User · Answer

lt script gt          tinh   click function              var sumVal   0          var table   document getElementById  quot table1 quot             for  var i   1  i  lt   table rows length-1   i                  sumVal   sumVal   parseInt table rows i  cells 3  innerHTML                       document getElementById  quot valueTotal quot   innerHTML   sumVal           lt  script gt

User · Answer

The code yo have provided runs fine  Remember that if you have your code in the header  you need to wait for the dom to be loaded first  In jQuery it would just be as simple as putting your code inside   function e          In normal javascript use window onLoad     or the like    or have the script after the table defnition  yuck    The snippet you provided runs fine when I have it that way for the following     lt html gt   lt head gt     lt meta http-equiv  content-type  content  text html  charset windows-1250  gt     lt meta name  generator  content  PSPad editor  www pspad com  gt     lt title gt  lt  title gt   lt  head gt   lt body gt     lt table id  ddReferences  gt       lt tr gt         lt td gt dfsdf lt  td gt          lt td gt sdfs lt  td gt         lt td gt frtyr lt  td gt         lt td gt hjhj lt  td gt       lt  tr gt     lt  table gt    lt script gt  var refTab   document getElementById  ddReferences   var  ttl     Loop through all rows and columns of the table and popup alert with the value     content of each cell  for   var i   0  row   refTab rows i   i          row   refTab rows i      for   var j   0  col   row cells j   j             alert col firstChild nodeValue            lt  script gt   lt  body gt   lt  html gt

User · Answer

the above guy was close but here is what you want          var table   document getElementById tableID          var rowCount   table rows length                   for  var r   0  n   table rows length  r  lt  n  r              for  var c   0  m   table rows r  cells length  c  lt  m  c                  alert table rows r  cells c  firstChild value                            catch e                alert e

User · Answer

function GetCellValues         var table   document getElementById  mytable        for  var r   0  n   table rows length  r  lt  n  r              for  var c   0  m   table rows r  cells length  c  lt  m  c                  alert table rows r  cells c  innerHTML

User · Answer

If you are looking for the contents of the TD  cell   then it would simply be  col innerHTML  I e  alert col innerHTML    You ll then need to parse that for any values you re looking for

User · Answer

If I understand your question correctly  you are looking for innerHTML   alert col firstChild innerHTML

User · Answer

Guess I m going to answer my own questions    Sarfraz was close but not quite right   The correct answer is   alert col firstChild value

User · Answer

confer below code     lt html gt   lt script gt        function addRow     var table   document getElementById  myTable      var row   document getElementById  myTable    var x   table insertRow 0   var e  table rows length-1  var l  table rows e  cells length    x innerHTML     amp nbsp     for  var c  0   m l  c  lt  m  c      table rows 0  insertCell c      table rows 0  cells c  innerHTML      amp nbsp  amp nbsp             function addColumn           var table   document getElementById  myTable            for  var r   0  n   table rows length  r  lt  n  r                      table rows r  insertCell 0                   table rows r  cells 0  innerHTML      amp nbsp  amp nbsp                        function deleteRow         document getElementById  myTable   deleteRow 0       function deleteColumn           var row   document getElementById  myRow     var table   document getElementById  myTable     for  var r   0  n   table rows length  r  lt  n  r          table rows r  deleteCell 0    var table handle        lt  script gt   lt body gt   lt input type  button  value  row    onClick  addRow    border 0       style  cursor hand  gt       lt input type  button  value  row -  onClick  deleteRow    border 0 style  cursor hand  gt       lt input type  button  value  column    onClick  addColumn    border 0 style  cursor hand  gt       lt input type  button  value  column -  onClick  deleteColumn    border 0 style  cursor hand  gt        lt table  id  myTable  border 1 cellpadding 0 cellspacing 0 gt    lt tr id  myRow  gt                 lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt     lt  tr gt   lt tr gt                 lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt     lt  tr gt        lt  table gt      lt  body gt   lt  html gt

User · Answer

I know this is like years old post but since there is no selected answer I hope this answer may give you what you are expecting     if document getElementsByTagName         var table   document getElementById  table className        for  var i   0  row  row   table rows i   i            rows would be accessed using the  row  variable assigned in the for loop      for  var j   0  col  col   row cells j   j             columns would be accessed using the  col  variable assigned in the for loop         alert  col html gt  gt   col innerHTML        Will give you the html content of the td         alert  col gt  gt   col innerText        Will give you the td value

User · Answer

Try this out  alert col firstChild data   Check this out for the difference between nodeValue and data  When working with text nodes should I use the  quot data quot    quot nodeValue quot    quot textContent quot  or  quot wholeText quot  field

User · Answer

A few problems    The loop conditional in your for statements is an assignment  not a loop check  so it might infinite loop You should use the item   function on those rows cells collections  not sure if array index works on those  not actually JS arrays  You should declare the row col objects to ensure their scope is correct    Here is an updated example   var refTab document getElementById  ddReferences    var  ttl      Loop through all rows and columns of the table and popup alert with the value      content of each cell   for   var i   0  i lt refTab rows length  i          var row   refTab rows item i      for   var j   0  j lt row cells length  j            var col   row cells item j       alert col firstChild innerText             Replace innerText with innerHTML if you want HTML  not the text contents

User · Answer

Have you tried innerHTML   I d be inclined to use getElementsByTagName   to find the  lt tr gt  elements  and then on each to call it again to find the  lt td gt  elements  To get the contents  you can either use innerHTML or the appropriate  browser-specific  variation on innerText

[javascript] Getting value from table cell in JavaScript...not jQuery

Examples related to javascript

Examples related to html