Мне нужно преобразовать созданную мной сетку таблицы в многомерный массив в соответствии с содержимым таблицы. Массив будет иметь следующий формат:

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

Как мне сделать это без использования JQuery, с помощью простого JavaScript? Все ответы, которые я нашел, были в jQuery.

JSFiddle.

11
Pratish Shrestha 18 Дек 2015 в 09:05

4 ответа

Лучший ответ

С qSA и Array.prototype.map все довольно просто.

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;
    });
  });
16
MinusFour 18 Дек 2015 в 06:18

Вы можете получить все tr внутри table (с идентификатором table1), выполнив

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 );
3
gurvinder372 18 Дек 2015 в 06:11

Предполагая, что ваша таблица похожа на приведенную ниже, вы можете преобразовать ее в массив массивов, используя коллекцию строки таблицы и коллекцию строк ячейки :

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>

Или, если вам нравится краткий код, используйте некоторые достоинства ES5:

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;
}
4
RobG 18 Дек 2015 в 06:22

Запустите цикл for через строки и поля:

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.

1
Michał Perłakowski 18 Дек 2015 в 06:17