[英]jQuery select only tr in main table, not in nested tables
我试图捕获表行的点击但是我想只捕获主表/主表行。如果行再次有表我想忽略它们。 我正在寻找与.on()一起使用的选择器,并且只选择主表行而不是嵌套表行。
要求:
.on()
解决方案 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>
在您的选择器中添加一个开始>
:
$('#example').on('click', '> tbody > tr:not(:has(>td>table))', function(e) {
// ...
}
这样,只会选择表格的直接tbody
子项。 还有:not(:has(>td>table))
过滤掉包含嵌套表的行。
这是一个分叉小提琴 。
您可以通过停止事件传播来完成此操作。 将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();
});
});
$(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
好。 为具有内部表的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
。 我不太确定语法但很可能是这样的。 选择具有特定类名的行。
我目前的解决方案,但@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.