[英]jQuery select only tr in main table, not in nested tables
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.
我正在寻找与.on()一起使用的选择器,并且只选择主表行而不是嵌套表行。
Requirements: 要求:
.on()
.on()
解决方案 JSFIDDLE: https://jsfiddle.net/bababalcksheep/8vpg6dp6/9/ JSFIDDLE: https ://jsfiddle.net/bababalcksheep/8vpg6dp6/9/
JS: 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: 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>
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. 这样,只会选择表格的直接
tbody
子项。 Also with :not(:has(>td>table))
you filter out rows which contain nested tables. 还有
:not(:has(>td>table))
过滤掉包含嵌套表的行。
You can do it by stopping the event propagation. 您可以通过停止事件传播来完成此操作。 Assign the id or class to inner table and stop the event propagation there.
将id或类分配给内部表并在那里停止事件传播。
<tr role="row" class="odd">
<td colspan="6">
<table style="width:100%" id="innerTable">
<tbody>
<tr>
.....
So write another selector just after your current code and stop the propagation like: 因此,在当前代码之后编写另一个选择器并停止传播,如:
$(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();
});
});
$(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
});
});
just added your table id 刚刚添加了你的表ID
Ok. 好。 Give class names for tr which has inner table.
为具有内部表的tr指定类名。 For example:
例如:
<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>
In the above code, I gave "has_inner_table" name to the row that has inner table. 在上面的代码中,我将“has_inner_table”名称赋予具有内部表的行。
And give name for other rows which dont have inner table. 并给出没有内表的其他行的名称。
for example. 例如。
<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>
Above , I gave "not_have_inner_table" . 上面,我给了“not_have_inner_table”。
And in your jQuery 在你的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
});
});
Which means only tr.not_have_inner_table
will be affected. 这意味着只会影响
tr.not_have_inner_table
。 I am not very sure about syntax but most probably like this. 我不太确定语法但很可能是这样的。 Select rows with specific class name.
选择具有特定类名的行。
My current Solution but @Linus Caldwell has better suggestion with selector only 我目前的解决方案,但@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);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.