jQuery - select table cells without selecting from a nested table

Question

I wrote some jQuery to select the cells from a table with a certain class; in this case, "hello". However, the table has nested tables with a column of the same class. How do I select the cells from the outer table but not select the cells from the inner? See below:

HTML:
<table class="foo"> <!-- this is the outer table
  <tbody>
    <tr>
      <td class="hello"> <!-- select this cell

        <table> <!-- this is the nested table
          <tbody>
            <tr>
              <td class="hello"> <!-- do not select this cell
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

jQuery:
// this selects the nested cells as well
$('table.foo:first').find('td.hello').doSomething();

Something like $('table:first tbody tr td.hello').doSomething(); — CaffGeek
– CaffGeek, Commented Jun 21, 2010 at 18:37
@Chad: This wouldn't work. It will select all descendant tbody s and therefore all td s. — Felix Kling
– Felix Kling, Commented Jun 21, 2010 at 18:40
@Felix Kling, Right, I should have had > between each element in the selector — CaffGeek
– CaffGeek, Commented Jun 21, 2010 at 19:12

Jamie Wong · Accepted Answer · 2010-06-21 18:43:50Z

5

What you want is to avoid recursing too deeply, so you can go like this:

$('table:first > tbody > tr > td.hello')

Which, I believe, is equivalent to

$('table:first').children('tbody').children('tr').children('td.hello')

edited Jun 21, 2010 at 18:43

answered Jun 21, 2010 at 18:38

Jamie Wong

18.4k8 gold badges66 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Null Head Over a year ago

Whether your <tr>s are inside tbody or not, you have to use tbody selector.

Denis 'Alpheus' Cahuk · Accepted Answer · 2010-06-21 18:45:49Z

0

If the classes on the outer table stay, you can just use:

$('table.foo > tbody > tr > td.hello');

One thing to note here perhaps is the fact that the <tbody> element is always present, even if you do not specify it explicitly. Due to the nature of the SGML/HTML/XHTML/whatyacallit definition for the <tbody> element, it has a optional opening tag. Even if the source does not contain it, the DOM element will be created when parsing the table.

answered Jun 21, 2010 at 18:45

Denis 'Alpheus' Cahuk

4,2222 gold badges25 silver badges31 bronze badges

1 Comment

Jamie Wong Over a year ago

I seem to remember there was some ambiguity about the autopresence of the tbody element in earlier versions of internet explorer. Does anybody happen to have a definitive reference about that?

Collectives™ on Stack Overflow

jQuery - select table cells without selecting from a nested table

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related