Select TRs within table using jquery.

Question

I have table within table scenario. When i try to select the trs using $("#table tr"); then it select all the tr from inner tables also.

How can i select tr from outer table only.

keaukraine · Answer 1 · 2013-06-25T08:39:54.203

5

Use this instead:

$('#table > tr'); // choose direct child tr nodes from table with id 'table'

Or

$('#table > tbody > tr');

If you have tbody element.

Here is link to jQuery documentation: http://api.jquery.com/child-selector/

edited Jun 25 '13 at 08:39

answered Jun 25 '13 at 07:53

keaukraine

5,315
29
54

1

I just tested a html without the `tbody` tag in IETester and even the old good IE5.5 (just like all newer browsers) automatically creates the missing `tbody` tag in DOM. So the first selector will always match zero rows. More info [here](http://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements#938143). – Stano Jun 25 '13 at 08:59

lonesomeday · Answer 2 · 2013-06-25T08:33:07.583

1

Intuitively, it seems like

$('table.top > tr');

will be sufficient. However, you can't guarantee that it will be. Some browsers implicitly insert a tbody element as a parent of all the trs. This is technically required by some versions of the HTML standard. Not all browsers do this, however. For safety, you should probably do something like this:

$('table.top > tr, table.top > thead > tr, table.top > tbody > tr');

A bit verbose, but more likely to work in more situations.

edited Jun 25 '13 at 08:33

answered Jun 25 '13 at 07:55

lonesomeday

233,373
50
316
318

@Stano Good catch. I've added a class. – lonesomeday Jun 25 '13 at 08:33
@Stano [It's not required in HTML5, however](http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-table-element). – lonesomeday Jun 25 '13 at 09:12
Yes it's not required in HTML, but it's automatically created in DOM. So the `$('table.top > tr');` selector will not find any direct `tr` children. Just tested it in FF and all IEs. **All** browsers insert the tbody element implicitly. – Stano Jun 25 '13 at 09:19

score 0 · Answer 3 · answered Jun 25 '13 at 07:54

0

if you have multiple tables in a single page, give them classes so you don't have to go through this every other time..

e.g.

$('.mytable > tr')

html

<table class="mytable">
  <tr>
    <td>...</td>
  </tr>
</table>

answered Jun 25 '13 at 07:54

Subliminal Hash

13,614
20
73
104

score 0 · Answer 4 · answered Jun 25 '13 at 07:57

Yep:

$('#table > tr');

But also, if you are making stylistic changes, make sure that you set a base style to all the table rows first (or target the inner tables specifically).

For example, if you execute $("#table > tr").css("background-color", "orange"); , the inner tables will become orange as well, because by CSS properties they inherit their parent styles.

Set a base color for all table rows first:

tr {
background-color: white;
}

score 0 · Answer 5 · edited May 23 '17 at 12:27

There are two alternatives for selecting direct children in the table body with jQuery:

var rows = $('#table > tbody > tr');

or

var rows = $('#table').children('tbody').children('tr');

The tbody element is created automatically in DOM (also in obsolete IE5.5), even when it was not written in HTML.
Using the jQuery's child selector is more readable and a bit faster than .children() method.

Select TRs within table using jquery.

5 Answers5