JavaScriptの5番目の項目ではなく、配列内のすべての5個の項目

Question

私は複数の行からなる表を持っています。各行は、5つのデータセルを含み、各セルのinnerHTMLプロパティが異なる：JavaScriptの

以下のコードは、最初の5つのセルからデータを取得し、私

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> 
... 

すべての行をループし、各行の各セルをループする必要があります。

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()の二つのレベルだろう：あなたはtr Sを反復し、そのループ内で、td Sを反復処理する必要が

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

https://jsfiddle.net/gbgjhj83/

Answer 2

を。

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/