CODEWITHSUNDEEP
javascript
Mohamed Jawadi
Mohamed Jawadi

Reputation: 45

How can i find "td:nth-child" number

I have tbody that have a list,

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

enter image description here

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 !

Upvotes: 0

Views: 425

Answers (3)

Stephen Ecker
Stephen Ecker

Reputation: 86

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]

Upvotes: 0

csum
csum

Reputation: 1992

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

Upvotes: 1

Felipe Chagas
Felipe Chagas

Reputation: 480

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.

Upvotes: 0

Related Questions