How do I iterate through table rows and cells in JavaScript

Question

If I have an HTML table   say   lt div id  myTabDiv  gt   lt table name  mytab  id  mytab1  gt     lt tr gt        lt td gt col1 Val1 lt  td gt       lt td gt col2 Val2 lt  td gt     lt  tr gt     lt tr gt       lt td gt col1 Val3 lt  td gt       lt td gt col2 Val4 lt  td gt     lt  tr gt   lt  table gt   lt  div gt    How would I iterate through all table rows  assuming the number of rows could change each time I check  and retrieve values from each cell in each row from within JavaScript

User · Answer

If you want one with a functional style  like this       const table   document getElementById  mytab1        const cells   table rows toArray                      flatMap row   gt  row cells toArray                       map cell   gt  cell innerHTML       col1 Val1    col2 Val2    col1 Val3    col2 Val4     You may modify the prototype object of HTMLCollection  allowing to use in a way that resembles extension methods in C   and embed into it a function that converts collection into array  allowing to use higher order funcions with the above style  kind of linq style in C         Object defineProperty HTMLCollection prototype   toArray             value  function toArray                 return Array prototype slice call this  0                      writable  true          configurable  true

User · Answer

This solution worked perfectly for me  var table   document getElementById  myTable   rows  var y  for i   0  i  lt    of rows  i         for j   0  j  lt    of columns  j                    y   table i  cells             do something with cells in a row          y j  innerHTML

User · Answer

Try  for  let row of mytab1 rows         for let cell of row cells                let val   cell innerText     your code below            x000D   x000D  for  let row of mytab1 rows   x000D    x000D      for let cell of row cells   x000D        x000D         console log cell innerText  x000D        x000D    x000D   lt div id  myTabDiv  gt  x000D   lt table name  mytab  id  mytab1  gt  x000D     lt tr gt   x000D       lt td gt col1 Val1 lt  td gt  x000D       lt td gt col2 Val2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt col1 Val3 lt  td gt  x000D       lt td gt col2 Val4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   x000D   x000D     x000D   x000D  for   let  i row  of     mytab1 rows  entries      x000D    x000D      for  let  j cell  of     row cells  entries      x000D        x000D         console log     i    j       cell innerText    x000D        x000D    x000D   lt div id  myTabDiv  gt  x000D   lt table name  mytab  id  mytab1  gt  x000D     lt tr gt   x000D       lt td gt col1 Val1 lt  td gt  x000D       lt td gt col2 Val2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt col1 Val3 lt  td gt  x000D       lt td gt col2 Val4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var table document getElementById  mytab1    x000D  var r 0    start counting rows in table x000D  while row table rows r     x000D    x000D    var c 0    start counting columns in row x000D    while cell row cells c     x000D      x000D      cell innerHTML   R  r  C  c         do sth with cell x000D      x000D    x000D   lt table id  mytab1  gt  x000D     lt tr gt  x000D       lt td gt A1 lt  td gt  lt td gt A2 lt  td gt  lt td gt A3 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt B1 lt  td gt  lt td gt B2 lt  td gt  lt td gt B3 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt C1 lt  td gt  lt td gt C2 lt  td gt  lt td gt C3 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    In each pass through while loop r c iterator increases and new row cell object from collection is assigned to row cell variables  When there s no more rows cells in collection  false is assigned to row cell variable and iteration through while loop stops  exits

User · Answer

If you want to go through each row  lt tr gt    knowing identifying the row  lt tr gt    and iterate through each column  lt td gt   of each row  lt tr gt    then this is the way to go   var table   document getElementById  mytab1    for  var i   0  row  row   table rows i   i           iterate through rows      rows would be accessed using the  row  variable assigned in the for loop    for  var j   0  col  col   row cells j   j             iterate through columns        columns would be accessed using the  col  variable assigned in the for loop            If you just want to go through the cells  lt td gt    ignoring which row you re on  then this is the way to go   var table   document getElementById  mytab1    for  var i   0  cell  cell   table cells i   i             iterate through cells        cells would be accessed using the  cell  variable assigned in the for loop

User · Answer

You can consider using jQuery  With jQuery it s super-easy and might look like this       mytab1 tr   each function          this  find  td   each function              do your stuff  you can use   this  to get current cell

User · Answer

You can use  querySelectorAll   to select all td elements  then loop over these with  forEach    Their values can be retrieved with  innerHTML    x000D   x000D  const cells   document querySelectorAll  td    x000D  cells forEach function cell    x000D    console log cell innerHTML   x000D     x000D   lt table name  mytab  id  mytab1  gt  x000D     lt tr gt   x000D       lt td gt col1 Val1 lt  td gt  x000D       lt td gt col2 Val2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt col1 Val3 lt  td gt  x000D       lt td gt col2 Val4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    If you want to only select columns from a specific row  you can make use of the pseudo-class  nth-child   to select a specific tr  optionally in conjunction with the child combinator   gt    which can be useful if you have a table within a table     x000D   x000D  const cells   document querySelectorAll  tr nth-child 2   gt  td    x000D  cells forEach function cell    x000D    console log cell innerHTML   x000D     x000D   lt table name  mytab  id  mytab1  gt  x000D     lt tr gt   x000D       lt td gt col1 Val1 lt  td gt  x000D       lt td gt col2 Val2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt col1 Val3 lt  td gt  x000D       lt td gt col2 Val4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Using a single for loop     var table   document getElementById  tableID      var count   table rows length    for var i 0  i lt count  i              console log table rows i

User · Answer

Better solution  use Javascript s native Array from   and to convert HTMLCollection object to an array  after which you can use standard array functions   var t   document getElementById  mytab1    if t        Array from t rows  forEach  tr  row ind    gt            Array from tr cells  forEach  cell  col ind    gt                console log  Value at row col      row ind         col ind            cell textContent                           You could also reference tr rowIndex and cell colIndex instead of using row ind and col ind   I much prefer this approach over the top 2 highest-voted answers because it does not clutter your code with global variables i  j  row and col  and therefore it delivers clean  modular code that will not have any side effects  or raise lint   compiler warnings     without other libraries  e g  jquery    If you require this to run in an old version  pre-ES2015  of Javascript  Array from can be polyfilled

[javascript] How do I iterate through table rows and cells in JavaScript?

Examples related to javascript