Selecting only `td` elements from the root table (not nested tables inside the root table)

Hey! i have a ref to a table element and I want to querySelectorAll its td in a certain index. I came up with the following:

tableRef.current.querySelectorAll<HTMLTableCellElement>(
  `tbody tr td:nth-child(${index + 1})`
)

tableRef.current.querySelectorAll<HTMLTableCellElement>(
  `tbody tr td:nth-child(${index + 1})`
)

it works very nicely but it also selects

td

td

elements from nested drawer tables, (which are basically the same table inside a certain

tr

tr

).
I want to select only the

td

td

s of the root table.

Can someone assist me? i'm open to JS and CSS solutions

nanoriseOP•3/21/24, 2:47 PM

tr

tr

elment with nested table can be identified because it has a attribute

Y7YA•3/21/24, 11:49 PM

if they can be identified like that, could you do

nanoriseOP•3/24/24, 11:04 AM

I think its a step into the solution but it doesn't work. because the inner table is the same table so it still has like the root table.
I guess the only way to determine a row in the inner table from the outer table is that it has 2 parent tables instead of one?
not sure if theres a css selector for taht @Y7YA

Nnanorise I think its a step into the solution but it doesn't work. because the inner tabl...

Y7YA•3/26/24, 12:21 AM

you can use for that type of selection