12

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.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Pratish Shrestha
  • 1,712
  • 4
  • 17
  • 26

4 Answers4

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;
    });
  });
MinusFour
  • 13,913
  • 3
  • 30
  • 39
7

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;
}
RobG
  • 142,382
  • 31
  • 172
  • 209
3

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 );
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
2

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.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177