我正在 try catch 对表行的点击,但我只想捕获主/主表行。如果行再次有表,我想忽略它们。 我正在寻找与 .on() 一起使用的选择器,并且只选择主表行而不是嵌套表行。
要求:
- 表有动态行,所以我正在寻找
.on()
的解决方案 - 解决方案选择器必须是通用的,我不想使用 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>
最佳答案
添加一个起始>
到您的选择器:
$('#example').on('click', '> tbody > tr:not(:has(>td>table))', function(e) {
// ...
}
这条路只能直达tbody
你的 table 的 child 将被选中。还有 :not(:has(>td>table))
您过滤掉包含嵌套表格的行。
这是一个 fork 的 Fiddle .
关于javascript - jQuery 只在主表中选择 tr,而不是在嵌套表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34924039/