javascriptを使用して複数のtdを含む文字列をループする方法は？

Question

バックグラウンドストーリー、私はユーザーがユーザーのコンテンツページから特定のデータを取得して何らかの計算を行うことを可能にするクロムエクステンションに取り組んでいます。

私が抱えている問題は、複数のTD要素を含む文字列をフィルタリングしてinnerTextを取得し、見つかった各文字列を配列に格納する方法です。

HTMLの表の内容& Javascriptを：

<table id="countryList"> 
    <tr> 
     <td>Europe</td> 
     <td>France</td> 
     <td>Sweden</td> 
     <td>Germany</td> 
    </tr> 
    <tr> 
     <td>Asia</td> 
     <td>Singapore</td> 
     <td>Thailand</td> 
     <td>Japan</td> 
    </tr> 
</table> 

var table = document.getElementById('countryList'); 
var tdArray = new Array; 
for (var r = 0, n = table.rows.length; r < n; r++) 
{ 
    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { 
     var stringContainTd = table.rows[r].cells[0].innerHTML); 
    } 
} 

//loop through stringContainTd to find each td element and store it's innerText into tdArray. 

Answer 1

あなたは配列にマッチした要素のリストを返しますどのquerySelectorAllを使用することができます。そして、この配列をループにforEachを使用して、テキスト

var arr = []; 
 
var getTDContent = document.querySelectorAll('td'); 
 
getTDContent.forEach(function(item) { 
 
    arr.push(item.textContent); // for pushing into arr 
 
})

<table id="countryList"> 
 
    <tr> 
 
    <td>Europe</td> 
 
    <td>France</td> 
 
    <td>Sweden</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Asia</td> 
 
    <td>Singapore</td> 
 
    <td>Thailand</td> 
 
    <td>Japan</td> 
 
    </tr> 
 
</table>

また、あなたもキャッチ府方法がmapあるnodelist上では動作しませんが、Array.prototype.map.call array.map使用することができますを取得するためにtextContentを使用マップ方法

var arr = [], 
 
    getTDContent = document.querySelectorAll('td'); 
 
arr = Array.prototype.map.call(getTDContent, function(item) { 
 
    return item.textContent; 
 
}) 
 
console.log(arr)

<table id="countryList"> 
 
    <tr> 
 
    <td>Europe</td> 
 
    <td>France</td> 
 
    <td>Sweden</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Asia</td> 
 
    <td>Singapore</td> 
 
    <td>Thailand</td> 
 
    <td>Japan</td> 
 
    </tr> 
 
</table>

を使用するのに役立つだろう