我如何找到“td：nth-​​child”号码

Question

I have tbody that have a list,

here's the website: https://www.worldometers.info/coronavirus/

the child number change every some hours

i tried to search for the word that is in tr

var word = "Tunisia",
    queue = [document.body],
    curr
;
while (curr = queue.pop()) {
    if (!curr.textContent.match(word)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE : // 3
                if (curr.childNodes[i].textContent.match(word)) {
                    console.log("Found!");
                    console.log(curr);
                    // you might want to end your search here.
                }
                break;
            case Node.ELEMENT_NODE : // 1
                queue.push(curr.childNodes[i]);
                if (curr.childNodes[i].textContent.match(word)) {
 }
                break;
        }
    }
}

but i don't know how to find the child number after i found the line

for now, it's 81

for exemple:

document.querySelector("#main_table_countries > tbody:nth-child(2) > tr:nth-child(81) > td:nth-child(3)").innerText

Sorry, for the bad english and explantation !

Answer 1

It seems like you want to know the row number that matches your word?

This will find each row in that specific table ( #main_table_countries ) and return a list of matches, including the tr index for each, plus its full text:

function findMatchingRow(word) {
  const found = []
  const trList = document.querySelectorAll('#main_table_countries > tbody > tr')
  trList.forEach((tr, i) => {
    if(tr.textContent.match(word)) {
      found.push({index: i, content: tr.textContent})
    }
  })
  return found
}

const matches = findMatchingRow('Tunisia')
console.log(matches)

if(matches.length > 0) {
  console.log('found at:', matches.map(m => m.index))
}

It allows for multiple matches, but you can change that if it's not necessary. (For example, "Guinea" would return multiple rows, as of now it would give you both "Guinea" and "Equatorial Guinea")

Answer 2

You can get the position relative to the parent element, try this:

var word = "Tunisia",
    queue = [document.body],
    curr
;
while (curr = queue.pop()) {
    if (!curr.textContent.match(word)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE : // 3
                if (curr.childNodes[i].textContent.match(word)) {
                    console.log("Found!");
                    console.log(curr);
                    console.log(curr.offsetLeft, curr.offsetTop); //Here
                    // you might want to end your search here.
                }
                break;
            case Node.ELEMENT_NODE : // 1
                queue.push(curr.childNodes[i]);
                if (curr.childNodes[i].textContent.match(word)) {
 }
                break;
        }
    }
}

But since you're running through the entire body it might not exactly the solution but hope it helps you get there.

Answer 3

You can use document.querySelectorAll to store all of the rows, then search through the first TD element in each's innerText until you find one that contains "Tunisia", then exit the loop after you perform whatever changes you wish to make.

var trs = document.querySelectorAll("#main_table_countries > tbody:nth-child(2) > tr");
for (var i = 0; i < trs.length; i++){
  var tds = trs[i].querySelector("td");
  if (tds.innerText.indexOf("Tunisia") != -1){

    tds.style.border = "2px red solid"; // as an example

    break;
  }
}

i is your row number, in this example, and tds refers to the element within that row which contains the text. So to change the entire row's color, you would use trs[i]