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))過濾掉包含嵌套表的行。

這是一個分叉小提琴 。

Answer 2

您可以通過停止事件傳播來完成此操作。 將id或類分配給內部表並在那里停止事件傳播。

 <tr role="row" class="odd">
  <td colspan="6">
    <table style="width:100%" id="innerTable">
      <tbody>
        <tr>
        .....

因此，在當前代碼之后編寫另一個選擇器並停止傳播，如：

$(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
});

$('#innerTable').on('click','tbody > tr', function(e){
   e.stopPropagation();
});
});

Answer 3

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

剛剛添加了你的表ID

Answer 4

好。 為具有內部表的tr指定類名。 例如：

<tr role="row" class="odd has_inner_table">
  <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>

在上面的代碼中，我將“has_inner_table”名稱賦予具有內部表的行。

並給出沒有內表的其他行的名稱。

例如。

<tr role="row" class="even not_have_inner_table">
  <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>

上面，我給了“not_have_inner_table”。

在你的jQuery中

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

這意味着只會影響tr.not_have_inner_table 。 我不太確定語法但很可能是這樣的。 選擇具有特定類名的行。

Answer 5

我目前的解決方案，但@Linus Caldwell只有選擇器才有更好的建議

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