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 arra         


        

Answer 1

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;
    });
  });

Answer 2

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;
}

Answer 3

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.

Answer 4

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 );