jQuery select only tr in main table, not in nested tables

Question

I am trying to capture click on table rows But I want to capture only master/main table rows.If Rows have again tables I want to ignore them. I am looking for selector which works with .on() and only selects master table rows not nested table rows.

Requirements:

1. Table has dynamic rows so I am looking for solution with .on()
2. Solution selector must be generic, I dont want to use tr.odd or tr.even classes restriction

JSFIDDLE: https://jsfiddle.net/bababalcksheep/8vpg6dp6/9/

JS:

$(document).ready(function() {
  //'tbody > tr:first:parent tr
  $('#example').on('click', 'tbody > tr', function(e) {
    console.log(this);
    //do something with row in master table
  });
});

HTML:

<table width="100%" cellspacing="0" class="display dataTable no-footer" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 84px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 124px;" aria-label="Position: activate to sort column ascending">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 62px;" aria-label="Office: activate to sort column ascending">Office</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 37px;" aria-label="Extn.: activate to sort column ascending">Extn.</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 63px;" aria-label="Start date: activate to sort column ascending">Start date</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 56px;" aria-label="Salary: activate to sort column ascending">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>5407</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>5797</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr role="row" class="odd">
      <td colspan="6">
        <table style="width:100%">
          <tbody>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
              <td>94</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Add a starting > to your selector:

$('#example').on('click', '> tbody > tr:not(:has(>td>table))', function(e) {
    // ...
}

This way only direct tbody children of your table will be selected. Also with :not(:has(>td>table)) you filter out rows which contain nested tables.

Here is an forked Fiddle.