Chrome querySelector () таблицы в массив

Question

Используя инструменты и консоль chrome dev, я хочу создать организованную таблицу или массив из таблицы HTML в консоли.То, что у меня есть, возвращает длинную строку всех элементов span:

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

Может ли кто-нибудь объяснить мне, как я могу создать массив каждой строки в таблице HTML?

(сайт для ссылки: https://www.copart.com/lotSearchResults/?free=true&query=, поскольку вы можете видеть, что нет ни одного класса или идентификатора ни для одного из элементов в таблице)

EDIT: структура таблицы по запросув комментариях

<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

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 3

У самой таблицы есть идентификатор, который вы можете использовать.

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

Это найдет все элементы <tr> (строки таблицы), которые находятся внутри элемента <tbody> (пропускает)<thead> (содержит имена столбцов), который, в свою очередь, должен находиться внутри элемента с идентификатором 'serverSideDataTable'.

Не уверен, что вы хотите сделать со строками после этого.

Answer 4

Здесь происходит много магии.

Я конвертирую querySelectorAll в массив, используя распространение .

Я делаю это, потому что querySelectorAll возвращает NodeList который в настоящее время не повторяется с 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, чтобы увидеть его в виде таблицы, как показано на скриншоте ниже.