csscss-selectorsdocumentgetelementsbyname

Find all <th> within a table of certain classname


I know this is quite simple, but struggling to get it to work.

I have a page with two tables, but I only want to find the <th>'s of a table, with a particular class name flexi-fruit.

For example:

<table class="flexi-fruit">
    <colgroup>
    <col>
    <col span="2">
    </colgroup>
    <tbody>
        <tr class="header-row">
            <th>
            </th>
            <th>&nbsp;Standard&nbsp;</th>
            <th>&nbsp;Exotic&nbsp;</th>
        </tr>
        <tr>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>

        </tr>

    </tbody>
</table>

So I want to find all the <th>s, in the table with the classname flexi-fruit. (And then do something).

Something like this document.querySelectorAll('th.flexi-fruit'),which obviously doesn't work.

Thanks.


Solution

  • You just had a wrong selector. document.querySelectorAll('table.flexi-fruit th'). This should work. Your selector would match every th which has the class flexi-fruit.