CODEWITHSUNDEEP
javascriptjquery
Jason Kelly
Jason Kelly

Reputation: 2645

Make the header row not clickable (don't highlight) the header

I need your help,

How can my jQuery code below be modified such that it will disallow (prevent) the user from selecting (highlighting) the top table header row? As it stands right now, each row in the table is selectable.

Here is the jQuery:

$("#data tr").click(function() {

    var selected = $(this).hasClass("highlight");

    $("#data tr").removeClass("highlight");

    if (!selected) { $(this).addClass("highlight"); }

});

Here is the HTML markup:

<table id="data" border="1" cellspacing="1" cellpadding="1">
    <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

Upvotes: 2

Views: 1672

Answers (2)

DarkAjax
DarkAjax

Reputation: 16223

You can modify your html or use: $("#data tr:not(:first)").click(function() {

Upvotes: 3

j08691
j08691

Reputation: 207861

Use the :gt() selector on the first line:

$("#data tr:gt(0)").click(function () {

jsFiddle example

This binds the click event to all but the first row.

Upvotes: 2

Related Questions