Traversing Table using DOM without ID or Class

Question

Here is the basic table:

<table>
  <tbody>
    <tr>
      <td style="color: #ff00ff; background-color: #ffffff">Q</td>
      <td style="background-color: #442244; color: #442244">Y</td>
      <td style="color: #ffff00; background-color: #442244">A</td>
    </tr>
    <tr>
      <td style="color: #ffeefe; background-color: #990000">Q</td>
      <td style="color: #ffff00; background-color: #ff0">M</td>
      <td style="color: #000000; background-color: #ff7777">O</td>
    </tr>
  </tbody>
</table>

I am trying to collect value of color and background-color of each TD to compare if they match or not. However in absence of ID or Class, I'm having a hard time traversing the table using DOM. Any suggestions would be greatly appreciated!!

For example, I would use getElementsByTagName('td') to collect all 6 TDs however, I could not read into each for it's style. I could not convert into array. querySelectorAll('td') produced an empty NodeList. I would try table = document.getElementsByTagName('table') and then table.getElementsByTagName('td') which gives me "table.getElementsByTagName is not a function" error. So I am stumped after doing researches and trying to understand best ways to traverse the table using DOM. Since I hit a wall, I'm trying stackoverflow.

PSA: it helps us if you include an indication of what you've tried and what didn't work. If you leave that out, we rightfully wonder about that, and may prompt for more research. Your last paragraph has some good information in it. — , Apr 22 '21 at 18:43
Add a [mcve] that shows the actual problem. From your description I would guess that you executed the script before the elements in the DOM are available: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Apr 23 '21 at 11:49

score 0 · Answer 1 · answered Apr 22 '21 at 18:37

0

let sameColors = [...document.querySelectorAll('td')].reduce((r,td)=>{
  if (td.style.backgroundColor===td.style.color) {
     r.push(td.textContent);
  }
  return r;
},[]);

console.log(sameColors);

<table>
  <tbody>
    <tr>
      <td style="color: #ff00ff; background-color: #ffffff">Q</td>
      <td style="background-color: #442244; color: #442244">Y</td>
      <td style="color: #ffff00; background-color: #442244">A</td>
    </tr>
    <tr>
      <td style="color: #ffeefe; background-color: #990000">Q</td>
      <td style="color: #ffff00; background-color: #ff0">M</td>
      <td style="color: #000000; background-color: #ff7777">O</td>
    </tr>
  </tbody>
</table>

answered Apr 22 '21 at 18:37

Vahid Alimohamadi

4,900
2
22
37

I don't understand. Is there something wrong with my computer? When I tried `document.querySelectorAll('td')` I got empty NodeList. I also tried `let color = [...document.querySelectorAll('td')];` - the array was empty. Finally, I just copied and paste to my Code and the console.log showed empty array.. – Tamer Apr 22 '21 at 23:25
@Tamer make sure do things after ```DOM``` loaded completely. – Vahid Alimohamadi May 09 '21 at 20:56

Traversing Table using DOM without ID or Class

1 Answers1