how to select 3rd tr's td in a html table?

Question

i have a table like below

 <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>Name 1</td>
                        <td>Red</td>
                    </tr>
                    <tr>
                        <td>Name 2</td>
                        <td>Blue</td>
                    </tr>
                    <tr>
                        <td>Name 3</td>
                        <td>Green</td>
                    </tr>
                    <tr>
                        <td>Name 4</td>
                        <td>Yellow</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

i want to select "Name 3". how to do this? i tried

$('table table tr td ')

but it returns Name 1. let say i dont have given id to anyone.i know i am missing something very silly! please help me.

Could you provide more context information like what do you need to select them for and do you need the selction based on the sting in the td or according to theire order? — web-tiki, Apr 30 '14 at 20:08
`document.querySelector("table table").rows[2].cells[0].textContent` — cookie monster, Apr 30 '14 at 20:15

score 6 · Answer 1 · edited Jun 20 '20 at 09:12

jQuery

You want to select an element based on its number in childrens of the parent. You would have a luck using :nth-child() of CSS/jQuery API.

$('table table tr:nth-child(3) td');

This would be desired I think!

Also note that it is a CSS element selector, and jQuery uses all CSS selectors to select elements.

To be more precise that you get only the first td, you can use this code:

$('table table tr:nth-child(3) td:first-child');

http://api.jquery.com/nth-child-selector/ (for more on child selection)

https://api.jquery.com/first-child-selector/ (for more on first-child selection)

CSS

If you use the same code in the CSS, you will get the same output.

Why? Because the selector that you'll use in jQuery is exactly the same in CSS. All you would need to change is how you implement the properties to the element.

Good luck!

Yeah. or depending on the markup `$('table table tr:nth-of-type(3) td')` — Adam, Apr 30 '14 at 20:13
Note that not *all* jQuery selectors are also valid CSS selectors. See https://api.jquery.com/category/selectors/jquery-selector-extensions/ Note also that browser support for a given selector might be better in jQuery than in CSS — Adam, Apr 30 '14 at 20:17

score 2 · Answer 2 · answered Apr 30 '14 at 20:10

2

You can select for content like this:

$('table table tr td:contains(Name 3)')

or you can select the third row specifically:

$('table table tr:nth-child(3) td')

or:

$('table table tr:eq(2) td');

answered Apr 30 '14 at 20:10

Joeytje50

18,636
15
63
95

score 1 · Answer 3 · answered Apr 30 '14 at 20:18

1

The best way to handle this would be to give some kind of identifiers to the various elements in the HTML (e.g., unique id values for each row, a common class value for the first <td> of each row, etc.). That kind of information is what really makes jQuery selectors really powerful.

But, if restricted to using your current code, the selector that I would probably use (to guarantee that I got exactly the element that I wanted) would be:

$('table').find('table').find("tr").eq(2).children(':first-child')

I prefer this style (as opposed to the "single selector" approach) because it tends to be faster and give you somewhat tighter control over the scope of your selections.

answered Apr 30 '14 at 20:18

talemyn

7,822
4
31
52

What makes you say your approach is faster, or give you tighter control? The [computation speed is better for a single selector](http://jsperf.com/splitting-selectors), and typing out a single selector is a lot shorter (so faster). Also, you can select exactly as much, with exactly the same control over the results, with jQuery-specific selectors (such as `:eq()`) as you can with your approach. I'd like to hear more about what makes you think this is better. – Joeytje50 May 02 '14 at 22:22
@Joeytje50 - Honestly, you need to test each specific situation to be sure which approach is fastest, but there are plenty of JSPerf tests showing `.find()` to be faster than a single, complex selector (good discussion here: http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery ). As for tighter control, methods like `.children()`, `.siblings()`, `next()`, etc. can drastically reduce the scope of your selections, particularly in larger, more complex DOM structures. Selectors allow that to a certain extent (e.g., `>` and `eq()`), but not always. – talemyn May 02 '14 at 22:58
On a side note, I didn't specifically test my suggestion, since I don't know his complete HTML structure, so I went with what I thought would be the fastest based on my experience and his DOM structure. If it were my code, actually wouldn't us my solution either . . . I'd actually make some design changes to the HTML to support a more efficient selection design. – talemyn May 02 '14 at 23:01

how to select 3rd tr's td in a html table?

3 Answers3

jQuery

CSS