Question

I have an asp.net gridview, which renders the following table structure:

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
</table>

I am using the following jQuery statement to highlight the entire row for each non-header row.

$("table tr:has(td)").css({ background: "ffffff" }).hover(
  function () { $(this).css({ background: "#FC6" }); },
  function () { $(this).css({ background: "#ffffff" }); }
);

How would I alter this code to highlight each non-header row but not the 3rd (last) cell of the row? e.g simultaneously highlight the first two cells of the row, but not the 3rd.

If anyone has a decent web reference for the selector logic, that would be appreciated also.

Answer 1

You can accomplish this using the :not() selector combined with the :last-child() selector, like so:

$("tr:has(td)").hover(function() {
    $(this).find("td:not(:last-child)").css("background-color", "#FC6");
}, function() {
    $(this).find("td").css("background-color", "#FFF");
});​

This would give the added benefit of not being tied to three columns as well. Here’s a fiddle that demonstrates this.