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?

• javascript
• jquery

4 Answers 4

Separate 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