Question

我在确定选择器时遇到了麻烦，我需要遍历某些行并从中获取单元格数据。看起来像这样：

<div class="ag-row ag-row-no-focus ag-row-no-animation ag-row-level-0 ag-row-odd" row="1" style="top: 30px; height: 30px;">
    <div class="ag-cell-no-focus ag-cell ag-cell-not-inline-editing ag-cell-value" tabindex="-1" colid="partnerNo" style="width: 60px; left: 0px; user-select: initial; cursor: text;">
    0010734964
    </div>
    <div class="ag-cell-no-focus ag-cell ag-cell-not-inline-editing ag-cell-value" tabindex="-1" colid="partnerName" style="width: 229px; left: 60px;">
    R.A.G. INDUSTRIAL SOLUTIONS, I NC
    </div>
</div>

行交替为ag-row-even和ag-row-odd，依此类推。我阅读的所有教程都描述了td和tr结构，但是在这里我看不到任何类似的元素。

我希望能够按该行号遍历每一行，但是我不知道如何获取该元素。每行的选择器似乎是唯一的。此外，我想将单元格作为从这些行生成的类对象的属性。我能够对另一个奇怪的表执行类似的操作：

for (var i = 0; i < 30; i++) {
    var myIndex = (120 + (i + 1));
    soldToSelector = '#statictext9Mq9nPD4a42Lyx9hdaUFY0_14-listdefintiona5uG8xn1wqkvGe3jrjPaCW_11-cloneINDEX';
    soldToValue = soldToSelector.replace("INDEX", i);
    soldToElement =  await page.$(soldToValue);
    myText =   await page.evaluate(soldToElement => soldToElement.textContent, soldToElement);
    accountsArray.push(new Account((myIndex), myText));
}

但是在那种情况下，选择器之间的唯一区别是末尾的数字，因此很容易遍历和更改。有什么想法吗？

Answer 1

该行似乎由“行”属性标识。您可以尝试执行以下操作来获取行数据：

let rows = document.querySelectorAll('[row]');

rows.forEach( (s, i) =>  {

  var cells = s.childNodes;
  cells.forEach( (node , j) => {
    if( node.innerText ) {
      console.log( 'text', j, node.innerText );
      // do something with the text values
    }
  });

});

Answer 2

您可以使用.ag-row定位行，并使用.ag-cell定位每个单元格。然后，您还可以使用.ag-row > .ag-cell:nth-child(n)定位到列，其中n是列号。

这里是一个例子：

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://www.ag-grid.com/example.php#/');

const names = await page.evaluate(() => {
  const firstColumnCells = Array.from(document.querySelectorAll('.ag-row > .ag-cell:nth-child(1)'));
  return firstColumnCells.map(cell => cell.innerText);
});

console.log(names);

await browser.close();

通过将上面的代码复制到应用程序中，然后单击“运行”，您可以使用demo of Ag-Grid对来自Try Puppeteer app的真实数据进行测试。

需要了解表格结构才能抓取网页

2 个答案: