Question

I have a gridview in jquery modal window. this grid displays different results depending upon the user selection on page.
hence the div is populated at runtime with a dataset and colum headers.

I am highlighting the clicked row as below

$('#imyGrid tr').click(function() {
        $('#<%=myGrid.ClientID%> tr').removeClass("selected");
        $(this).addClass("selected");

    });

and highlighting the hover as

$('#<%=myGrid.ClientID%> tr').mouseover(function() {
    $(this).addClass("highlight");
    });

    $('#<%=myGrid.ClientID%> tr').mouseout(function() {
    $(this).removeClass("highlight");

    });

But this makes the header row also clickable and hover also changes the style. How can I make header row as non clickable ?

Answer 1

Use the :not() and :first selectors:

$('#<%=myGrid.ClientID%> tr:not(:first)')

Demo

---

EDIT:
To make both header and footer rows unclickable, you can combine :not() with the :first and :last selectors:

$('#<%=myGrid.ClientID%> tr:not(:first,:last)')