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

【问题标题】：Convert table to array in JavaScript without using jQuery在不使用 jQuery 的情况下在 JavaScript 中将表转换为数组
【发布时间】：2025-12-24 05:30:07
【问题描述】：

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

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

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

JSFiddle.

【问题讨论】：

应该不是很难，表格网格是什么样子的？
它在上面的小提琴链接中。

标签： javascript html arrays

【解决方案1】：

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

【讨论】：

啊，是的，地图是自然的。我为什么选择减少？ ;-)
我经常这样做，总是考虑减少然后我意识到......“哦......”

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以通过以下方式获得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 );

【讨论】：

谢谢你，会尽力让你知道

【解决方案4】：

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

【讨论】：