在不使用jQuery的情况下，用JavaScript将表转换为数组

Convert table to array in JavaScript without using jQuery

本文关键字：转换 JavaScript 数组 情况下 jQuery      更新时间：2023-09-26

我需要根据表中的内容将我创建的表网格转换为多维数组。数组的格式如下：

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

如果不使用jQuery，使用纯JavaScript，我该如何做到这一点？我找到的所有答案都在jQuery中。

JSFiddle。

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

假设您的表类似于下面的表，您可以使用表的rows集合和行的cellscollection将其转换为数组：

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

您可以通过获取table（id为table1）中的所有tr

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

在行和字段中运行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。

相关文章：