将表存储在二维数组 jquery 中答案

【问题标题】：Store table in 2d array jquery将表存储在二维数组 jquery 中
【发布时间】：2017-01-29 17:50:09
【问题描述】：

我正在尝试将表存储在二维数组中，以便数组中的每个项目都是包含一行中所有单元格的数组。

我正在使用：

var tRow = [];
var tRows = [];
tab = document.getElementById('table'); 

for(var r = 0 ; r < tab.rows.length ; r++) {
    for (var c=0; c < tab.rows[r].cells.length; c++){
        tRow[c] = tab.rows[r].cells[c].innerHTML;                       
    }

    tRows.push(tRow);
}

这只是给了我 20 个位置的最后一行项目，而不是表中各自索引处的每个项目。所以，对于这张表：

<tr> 
 <td>Row 1 cell 1</td>
 <td>Row 1 cell 2</td>
 <td>Row 1 cell 3</td>
 <td>Row 1 cell 4</td>
</tr>
<tr>
 <td>Row 2 cell 1</td>
 <td>Row 2 cell 2</td>
 <td>Row 2 cell 3</td>
 <td>Row 2 cell 4</td>
</tr>

tRows 将是：

tRows =[ [Row 2 cell 1,Row 2 cell 2,Row 2 cell 3,Row 2 cell 4] , [Row 2 cell 1,Row 2 cell 2,Row 2 cell 3,Row 2 cell 4] ]

代替：

tRows =[ [Row 1 cell 1,Row 1 cell 2,Row 1 cell 3,Row 1 cell 4] , [Row 2 cell 1,Row 2 cell 2,Row 2 cell 3,Row 2 cell 4] ]

我不知道我做错了什么。请帮忙。

【问题讨论】：

标签： jquery arrays html-table 2d

【解决方案1】：

您可以使用两个 map() 函数来做到这一点。

var tRows = $('tr').map(function() {
  return [$(this).find('td').map(function() {
    return $(this).text()
  }).get()]
}).get()

console.log(tRows)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1 cell 1</td>
    <td>Row 1 cell 2</td>
    <td>Row 1 cell 3</td>
    <td>Row 1 cell 4</td>
  </tr>
  <tr>
    <td>Row 2 cell 1</td>
    <td>Row 2 cell 2</td>
    <td>Row 2 cell 3</td>
    <td>Row 2 cell 4</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您的问题是每次外循环迭代都需要一个新的 tRow 数组。

只需将var tRow = []; 移动到该行循环内

var tRows = [];
tab = document.getElementById('table');

for (var r = 0; r < tab.rows.length; r++) {
  var tRow = [];// start new row array
  for (var c = 0; c < tab.rows[r].cells.length; c++) {
    tRow[c] = tab.rows[r].cells[c].innerHTML;       
  }
  tRows.push(tRow);
}

console.log(tRows);

<table id="table">
  <tr>
    <td>Row 1 cell 1</td>
    <td>Row 1 cell 2</td>
    <td>Row 1 cell 3</td>
    <td>Row 1 cell 4</td>
  </tr>
  <tr>
    <td>Row 2 cell 1</td>
    <td>Row 2 cell 2</td>
    <td>Row 2 cell 3</td>
    <td>Row 2 cell 4</td>
  </tr>
</table>

【讨论】：