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

這裏是叉形Fiddle。

Answer 2

$(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 3

好的。爲具有內部表格的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 4

您可以通過停止事件傳播來做到這一點。將id或class分配給內部表並停止事件在那裏傳播。

<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 5

我目前的解決方案，但@Linus考德威爾有選擇更好的建議只有

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