Select a value by a text value in a table using Javascript Selectors

Question

I have multiple tables on a page with nested tables. None of the tables have an id, and the only data that I can differentiate all the rows is the value in a <font> field. I need to pull the value in a font field containing text "SkuId", and the value in the font field immediately following this field. So I would need to pull "SkuId" and "123456", which would be the Sku Id. There are hundreds of these in the table, so I'll need to pull this into an array.

I'm assuming it's something along the lines of this:

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

I know this isn't right, since it doesn't help me to select the field after the actual SkuId field (ex. 123456).

Here is an example of the table:

<table>...
</table>
<table>
    <tbody>
       <tr>...
       </tr>
       <tr>
           <td><font>Sku_ID</font></td>
           <td><font>123456</font></td>
       </tr>
    </tbody>
</table>

As Sidney said, you'll Javascript to do this. Check out this related post about CSS selectors https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — TJBlackman, Dec 22 '17 at 02:13
Why are you using ``? That tag has been deprecated long ago. — Carl Edwards, Dec 22 '17 at 02:53

score 0 · Answer 1 · answered Dec 22 '17 at 01:52

If I recall correctly, CSS selectors cannot look at the inner text of an element, at all.

So you'll need to just select all the 'table tbody tr td font' elements and use some JavaScript to figure out which ones come after an element containing "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>

score 0 · Answer 2 · answered Dec 22 '17 at 02:30

If you do not control reduce, you can always use a for:

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);

<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>

Snippet: https://jsfiddle.net/0xcayo1b/1/

Select a value by a text value in a table using Javascript Selectors

2 Answers2