Question

我在带有嵌套表的页面上有多个表。没有表具有id，并且我可以区分所有行的唯一数据是@GeneratedValue字段中的值。我需要在包含文本“SkuId”的字体字段中拉取值，并在该字段后紧跟字体字段中的值。所以我需要拉“SkuId”和“123456”，这将是Sku Id。表中有数百个，所以我需要把它拉成一个数组。

我假设它是这样的：

<font>

我知道这是不对的，因为它无法帮助我在实际的SkuId字段之后选择字段（例如123456）。

以下是该表的示例：

document.querySelectorAll('table>tbody>tr>td>font[value="Sku_Id"]')

Answer 1

如果我没记错的话，CSS选择器根本无法查看元素的内部文本。

因此，您需要选择所有'table tbody tr td font'元素并使用一些JavaScript来确定哪些元素包含"Sku_ID"

元素

const dataElements = Array.from(document.querySelectorAll('table tbody tr td font'))

const { ids } = dataElements.reduce(({ lastWasSkuId, ids }, element) => {
  let isSkuId = false
  if (lastWasSkuId) {
    ids.push(element.innerText)
  } else if (element.innerText === 'Sku_ID') {
    isSkuId = true
  }
  return {
    lastWasSkuId: isSkuId,
    ids
  }
}, { wasLastSkuId: false, ids: []})

console.log(ids)

<table>
    <tbody>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>1</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>not me</font></td>
           <td><font>Sku_ID</font></td>
           <td><font>2</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>3</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>4</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>5</font></td>
           <td><font>not me</font></td>
       </tr>
    </tbody>
</table>

Answer 2

如果您不控制reduce，则可以随时使用for：

＆＃13;

const fonts = document.querySelectorAll('font');
const length = fonts.length;
let ids = [];

for (let i=0; i<length; i++) {
  if (fonts[i].innerText === 'Sku_ID') {
    ids.push(fonts[i+1].innerText)
  }
}

console.log(ids);

＆＃13;

<table>
    <tbody>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>1</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>not me</font></td>
           <td><font>Sku_ID</font></td>
           <td><font>2</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>3</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>4</font></td>
           <td><font>not me</font></td>
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>5</font></td>
           <td><font>not me</font></td>
       </tr>
    </tbody>
</table>

＆＃13;

代码段：https://jsfiddle.net/0xcayo1b/1/

使用Javascript选择器按表中的文本值选择值

2 个答案: