CODEWITHSUNDEEP
jquery
ECMAScript
ECMAScript

Reputation: 4649

Retrieving multiple <td> in a table

HTML:

<table>
<tbody>
<tr>
<td> Info! </td>
<td> Null </td>
</tr>
<tr>
<td> 
Info 2
</td>
</tr>
</tbody>
</table>

JS:

var elem = $("tr");

I've tried:

elem.find("td").get(0);

And

elem[1].find("td").get(0);

It works fine for selecting the different table rows, but I can't select the <td>.

But that only gets me the first row's <td> tag.

How would I get the 2nd tr's td tag?

Upvotes: 1

Views: 869

Answers (3)

Matthew Brown
Matthew Brown

Reputation: 5116

Among other solutions, you can use the nth-of-type selector:

$('tr td:nth-of-type(2)')

So to expand on your trials:

var elem = $("tr");

elem.find('td:nth-of-type(2)');

Or, alternatively:

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

Any of these should do the trick.

Upvotes: 1

T J
T J

Reputation: 43156

You can use the :nth-child css selector:

$("tr:nth-child(2) td")

or the jquery :eq() selector (0 index based):

$("tr:eq(1) td")

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

Assuming that elem contains all the <tr> elements, then:

elem.eq(1).find('td');

1, because JavaScript is zero-indexed (so the first is 0, the second is 1, etc).

Or, slightly more cumbersome:

elem.filter(':nth-child(2)').find('td');

2 because CSS's :nth-child() pseudo-class is one-based (so the first is 1, the second is 2).

References:

Upvotes: 1

Related Questions