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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34349403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:35:53  来源:igfitidea点击:

Convert table to array in JavaScript without using jQuery

javascripthtmlarrays

提问by Pratish Shrestha

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.

如何在不使用 jQuery 的情况下使用纯 JavaScript 执行此操作?我找到的所有答案都在 jQuery 中。

JSFiddle.

JSFiddle

回答by MinusFour

With qSA and Array.prototype.mapis pretty simple.

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

回答by RobG

Presuming your table is something like the one below, you can convert that into an array of arrays using the rowscollection of the table and cellscollection 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:

或者,如果喜欢简洁的代码,请使用一些 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;
}

回答by gurvinder372

you can get all the trinside a table(having id table1) by doing

你可以通过做得到所有的tr内部table(有 id 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 );

回答by Micha? Per?akowski

Run a for loop through the rows and the fields:

通过行和字段运行 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.

JS小提琴