jQuery 只在主表中选择 tr，而不是在嵌套表中

Question

我正在尝试捕获对表行的点击但我只想捕获主/主表行。如果行再次有表，我想忽略它们。我正在寻找与 .on() 一起使用的选择器，并且只选择主表行而不是嵌套表行。

要求：

1. 表有动态行，所以我正在寻找解决方案 .on()
2. 解决方案选择器必须是通用的，我不想使用 tr.odd 或 tr.even 类限制

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

添加一个开始>到你的选择器：

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

这样，只会tbody选择表的直接子项。还可以:not(:has(>td>table))过滤掉包含嵌套表的行。

这是一个分叉的小提琴。