Convert table to array in JavaScript without using jQuery

Question

I need to convert the table grid i created into an multidimensional array according to the content inside the table. Array would be in format like:

 var array = [
               [column,column,...],
               [column,column,...],
               ...
              ];

How do I do this without using jQuery, using plain JavaScript? All answers I found was in jQuery.

JSFiddle.

It's probably not very difficult, what does the table grid look like? — RobG, Dec 18 '15 at 06:07

score 20 · Accepted Answer · answered Dec 18 '15 at 06:18

20

With qSA and Array.prototype.map is pretty simple.

var tableInfo = Array.prototype.map.call(document.querySelectorAll('#tableId tr'), function(tr){
  return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
    return td.innerHTML;
    });
  });

answered Dec 18 '15 at 06:18

MinusFour

13,913
3
30
39

Ah yes, map is a natural. Why did I go for reduce? ;-) – RobG Dec 18 '15 at 06:26
I do that a lot, always thinking in terms of reduce then I realize... "oh..." – MinusFour Dec 18 '15 at 06:30

RobG · Answer 2 · 2015-12-18T06:22:34.197

Presuming your table is something like the one below, you can convert that into an array of arrays using the rows collection of the table and cells collection of the rows:

function tableToArray(table) {
  var result = []
  var rows = table.rows;
  var cells, t;

  // Iterate over rows
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    cells = rows[i].cells;
    t = [];

    // Iterate over cells
    for (var j=0, jLen=cells.length; j<jLen; j++) {
      t.push(cells[j].textContent);
    }
    result.push(t);
  }
  return result; 
}
    
    document.write(JSON.stringify(tableToArray(document.getElementsByTagName('table')[0])));

<table>
  <tr>
    <td>one<td>two<td>three
  <tr>
    <td>one<td>two<td>three
  <tr>
    <td>one<td>two<td>three
</table>

Or if like concise code, use some ES5 goodness:

function tableToArray(table) {
  var result  = [].reduce.call(table.rows, function (result, row) {
      result.push([].reduce.call(row.cells, function(res, cell) {
          res.push(cell.textContent);
          return res;
      }, []));
      return result;
  }, []);
  return result;
}

score 3 · Answer 3 · answered Dec 18 '15 at 06:11

you can get all the tr inside a table (having id table1) by doing

var tableObj = document.getElementById( "table1" );
var arr = [];
var allTRs = tableObj.getElementsByTagName( "tr" );
for ( var trCounter = 0; trCounter < allTRs.length; trCounter++ )
{
   var tmpArr = [];
   var allTDsInTR = allTRs[ trCounter ].getElementsByTagName( "td" );
   for ( var tdCounter = 0; tdCounter < allTDsInTR.length; tdCounter++ )
   {
      tmpArr.push( allTDsInTR[ tdCounter ].innerHTML );
   }
   arr.push( tmpArr );
}
console.log( arr );

Thank you, will try and let you know – Pratish Shrestha Dec 18 '15 at 06:16 — Pratish Shrestha, Dec 18 '15 at 06:16

score 2 · Answer 4 · answered Dec 18 '15 at 06:17

Run a for loop through the rows and the fields:

var array = [];
var table = document.querySelector("table tbody");
var rows = table.children;
for (var i = 0; i < rows.length; i++) {
    var fields = rows[i].children;
  var rowArray = [];
  for (var j = 0; j < fields.length; j++) {
    rowArray.push(fields[j].innerHTML);
  }
  array.push(rowArray);
}
console.log(array);

JSfiddle.

Convert table to array in JavaScript without using jQuery

4 Answers4

Linked