排列中的每5个项目，而不是JavaScript中的每个第5个项目

Question

我有一个由多行组成的表。每行包含5个数据单元，并且每个单元的innerHTML是不同的：

HTML

<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
    <td>Data 4</td> 
    <td>Data 5</td> 
</tr> 
<tr> 
    <td>Data 6</td> 
    <td>Data 7</td> 
    <td>Data 8</td> 
    <td>Data 9</td> 
    <td>Data 10</td> 
</tr> 
... 

的JavaScript

在下面的代码从所述第一5个细胞得到的数据，但我需要循环遍历所有行，然后遍历每行内的每个单元格。

var allTableData = []; 
var tableData = $('td'); 

_.each(tableData, (data, i) => { 
    if (i < 5) { 
     allTableData.push(data.innerHTML); 
    } 
}); 

我所需的输出是：

values: [ 
    ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5'], 
    ['Data 6', 'Data 7', 'Data 8', 'Data 9', 'Data 10'], 
    [...] 
]; 

如何我会得到我想要的输出用JavaScript/JQuery的？

Answer 1

我会做的.map()两个层次：

var arr = $('table tr').get().map(function(tr) { 
    return $('td', tr).get().map(function(td) { 
    return $(td).html(); 
    }); 
}); 

https://jsfiddle.net/gbgjhj83/

Answer 2

您需要遍历tr S，以及循环中，遍历td秒。

var allTableData = []; 
 
var rowData = []; 
 
var tableRows = $('#myTable tr'); 
 
var row; 
 

 
tableRows.each(function() { 
 
    rowCells = $(this).find('td'); 
 
    rowCells.each(function() { 
 
    rowData.push($(this).text()); 
 
    }); 
 
    allTableData.push(_.clone(rowData)); 
 
    rowData.length = 0; 
 
}); 
 

 
console.log(allTableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="myTable"> 
 
    <tr> 
 
    <td>Data 1</td> 
 
    <td>Data 2</td> 
 
    <td>Data 3</td> 
 
    <td>Data 4</td> 
 
    <td>Data 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data 6</td> 
 
    <td>Data 7</td> 
 
    <td>Data 8</td> 
 
    <td>Data 9</td> 
 
    <td>Data 10</td> 
 
    </tr> 
 
</table>

https://jsfiddle.net/Lzekdy23/2/