Currently I am using
$('#mytable tr').click(function() {
blah blah
});
This makes all rows, including the headers clickable. How can I exclude the headers or <th>'s?
Currently I am using
$('#mytable tr').click(function() {
blah blah
});
This makes all rows, including the headers clickable. How can I exclude the headers or <th>'s?
4 Answers
Reset to default 8Separate you header and body using <thead> and <tbody> tags, and change your selector to "#mytable tbody tr"
HTML will look something like this
<table>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
The easiest way, assuming you've marked your table up accurately, is to use:
$('#mytable tbody tr').click(function() {
blah blah
});
Failing that:
$('#mytable tr').filter(
function(){
return $(this).find('td').length;
}).click(function() {
$(this).addClass('clicked');
});
JS Fiddle demo.
You can remove them with the not function:
$('#mytable tr').not('th').click(function() {
blah blah
});
Or:
$('#mytable tr:not(th)').click(function() {
blah blah
});
Use Jquery delegate
$("#mytable").delegate("td", "click", function() {
//Do something
});
this should work