javascript - 将表的 Chrome querySelector() 转换为数组

Question

使用 chrome 开发工具和控制台，我想从控制台中的 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>