JQuery getting the tr after clicking its content <a>

Question

Suppose I have

<table>
  <tr>
    <td><a class='ilink'> link text </a></td>
    <td></td>
    <td></td>
  <tr>
  <tr>
    <td><a class='ilink'> link text </a></td>
    <td></td>
    <td></td>
  </tr>
</table>

in the jquery code, after clicking the link, I want to highlight the entire table row that the link is in. But how can I find it?

Answer 1

You can do it with .closest() like this:

$("a.ilink").click(function() {
  $(this).closest("tr").addClass("highlight");
});

If you have a lot of rows, this would be more efficient (one copy of this vs. one for every <a>):

$("table").delegate("a.ilink", "click", function(){
  $(this).closest("tr").addClass("highlight");
});

Answer 2

#EDIT remove...  better options listed

Answer 3

$(document).ready(function(){
    $('a.ilink').click(function() {
        $('tr').removeClass('highlight');
        $(this).closest('tr').addClass('highlight');
    });
 });

Then you will need the highlight css class defined:

.hightlight { background-color:red; }