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.
Requirements:
- Table has dynamic rows so I am looking for solution with
.on() - Solution selector must be generic, I dont want to use tr.odd or tr.even classes restriction
JSFIDDLE: /
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>
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.
Requirements:
- Table has dynamic rows so I am looking for solution with
.on() - Solution selector must be generic, I dont want to use tr.odd or tr.even classes restriction
JSFIDDLE: https://jsfiddle/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>
5 Answers
Reset to default 5Add 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. Also with :not(:has(>td>table)) you filter out rows which contain nested tables.
Here is an forked Fiddle.
You can do it by stopping the event propagation. Assign the id or class to inner table and stop the event propagation there.
<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
My current Solution but @Linus Caldwell has better suggestion with selector only
$(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);
}
});
});
Ok. Give class names for tr which has inner table. 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.
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" .
And in your 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. I am not very sure about syntax but most probably like this. Select rows with specific class name.