Question

使用chrome dev工具和控制台，我想从控制台的HTML表创建一个组织化的表或数组。到目前为止，我返回的是所有span元素的长字符串：

$('tbody > tr > td > span').text();

有人可以教我如何在HTML表格中为每一行创建一个数组吗？

（供参考的站点：https://www.copart.com/lotSearchResults/?free=true&query=，因为您可以看到表中的任何元素都没有类或ID）

编辑：注释中要求的表结构

<tr>
<td><span data-uname="lotsearchLotnumber">1997</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">45</span>
</tr>
<tr>
<td><span data-uname="lotsearchLotnumber">1998</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">40</span>
</tr>
...

我想这样输出一个数组：

[1997, FORD, 45]
[1998, FORD, 40]
...

Answer 1

在该站点上，您将不得不多解释一些您期望输出的样子。您需要使用图像，一些按钮，评级和标准文本，因此您需要一些其他逻辑来嗅探这些内容。

但是，通常来说，这是如何获取给定HTML表并将其转换为对象数组的一个很好的起点。在此示例中，假设您的table包含thead和tbody格式。如果没有，则可以将其从代码中删除。

此外，我还要指出，如果您只是想下载一些数据而实际上并不需要“永久解决方案”，则应该研究诸如this

const htmlToArray = (tableElement) => {
  const thead = tableElement.querySelector('thead');
  const tbody = tableElement.querySelector('tbody');
  // Assumes there's only one header row
  const columns = thead.querySelectorAll('tr th');
  const columnNames = [];
  columns.forEach( c => columnNames.push(c.innerText));
  const result = [];
  const bodyRows = tbody.querySelectorAll('tr');
  bodyRows.forEach( r => {
    const tds = r.querySelectorAll('td');
    const obj = {};
    tds.forEach( (td, idx) => {
      obj[columnNames[idx]] = td.innerText;
    });
    result.push(obj);
  });
  return result;
};

const table = document.querySelector('table');
console.log(htmlToArray(table));

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
    </tr>
    <tr>
      <td>Data4</td>
      <td>Data5</td>
      <td>Data6</td>
    </tr>
    <tr>
      <td>Data7</td>
      <td>Data8</td>
      <td>Data9</td>
    </tr>
  </tbody>
</table>

Answer 2

表本身具有您可以使用的ID。

var rows = document.querySelectorAll('#serverSideDataTable tbody tr')

这将找到<tr>元素内的所有<tbody>元素（表行）（跳过包含列名的<thead>），而这些元素又必须位于元素内ID为“ serverSideDataTable”。

不确定接下来要处理的行。

Answer 3

CTS_AE显示了一种很好的功能方法。这是使用Array.from-

的另一个功能解决方案

const table =
  Array.from(document.querySelectorAll('tr'), tr =>
    Array.from(tr.querySelectorAll('td'), td =>
      td.textContent
    )
  )

console.log(table)

<table>
<tr>
<td><span data-uname="lotsearchLotnumber">1997</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">45</span>
</tr>
<tr>
<td><span data-uname="lotsearchLotnumber">1998</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">40</span>
</tr>
</table>

为了对比，这是命令式的答案-

const table = []

for (const tr of document.querySelectorAll('tr')) {
  const row = []
  for (const td of tr.querySelectorAll('td')) {
    row.push(td.textContent)
  } 
  table.push(row)
}

console.log(table)

<table>
<tr>
<td><span data-uname="lotsearchLotnumber">1997</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">45</span>
</tr>
<tr>
<td><span data-uname="lotsearchLotnumber">1998</span>
<td><span data-uname="lotsearchLotnumber">FORD</span>
<td><span data-uname="lotsearchLotnumber">40</span>
</tr>
</table>

Answer 4

这里有很多魔术。

我正在使用spread将querySelectorAll转换为数组。

我这样做是因为querySelectorAll返回一个NodeList 目前无法使用map进行迭代；一些编译器/插件可能允许这样做。

然后我map反复显示自己想要的值。

var trs = [...document.querySelectorAll('tr')];

var data = trs.map(tr => {
  var tds = [...tr.querySelectorAll('td')];
  return tds.map(td => td.innerText);
});

console.log(data);
console.table(data);

<table>
  <tr>
    <td>1997</td>
    <td>FORD</td>
    <td>45</td>
  </tr>
  <tr>
    <td>1998</td>
    <td>FORD</td>
    <td>40</td>
  </tr>
</table>

Protip ：如果您希望在控制台中更清楚地看到这些值，可以使用console.table将其作为表格查看，如下面的屏幕快照所示。< / p>

将表的queryquerySelector（）放入数组

4 个答案: