如何通過包含多個使用JavaScript的td的字符串循環？

Question

背景故事，我正在研究一個Chrome擴展，它允許用戶從用戶內容頁面檢索特定數據並進行一些計算。

我遇到的問題是如何過濾包含多個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遍歷這個數組，並使用textContent來獲取文本

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>

另外，您也可以使用array.map方法BU美中不足的是map上nodelist不起作用，但Array.prototype.map.call將使用地圖的方法

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>

幫助