javascript - 如何使用javascript循环包含多个td的字符串？

Question

背景故事，我正在开发一个 Chrome 扩展，它允许人们从用户内容页面检索特定数据并进行一些计算。

我遇到的问题是如何过滤包含多个 td 元素的字符串，以获取其内部文本，然后将找到的每个元素存储到数组中。

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 方法，但问题是 map 不适用于 nodelist，但 Array.prototype.map.call 将有助于使用 map 方法

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>