javascript - Making table rows but not table headers clickable in jquery - Stack Overflow

admin管理员组

文章数量:1323029

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

Share Improve this question Follow edited Jan 25, 2012 at 13:50 Anthony Grist 38.3k88 gold badges6464 silver badges7676 bronze badges asked Jan 25, 2012 at 13:45 lodkkxlodkkx 1,17322 gold badges1717 silver badges2929 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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

本文标签： javascriptMaking table rows but not table headers clickable in jqueryStack Overflow