jQuery parent('tr') onFocus

An application that I am building uses a large table with data input fields to record data. I need to give the user a visual clue as to what table row they are on to help them navigate the form.

Currently I have

onFocus="HighlightTableRow()"

on a dropdown list. When a user clicks or tabs to this form element, the parent table row should highlight. So, here's the function that gets called onFocus:

开发者_JAVA百科

function HighlightTableRow(){  
  $(this).parent("tr").addClass('RowHighlight');  
  //alert($(this));  
}

Two problems:

1. When that row is not in use (form element NOT onFocus) then I need to .removeClass('RowHighlight'). Not sure how to do that.
2. I can't seem to get the selector right. The alert that I commented out will fire, but nothing happens to the style of the 'tr' element.

Any help appreciated. Thanks!

---

<select name="ContactMade[]" id="ContactMade">

Javascript:

$("#ContactMade").focus(function() {
    $(this).closest("tr").addClass('RowHighlight');
})
.blur(function() {
    $(this).closest("tr").removeClass('RowHighlight');
});

---

I think you want to change the style of the cells ... let's say the backgorund: try defining the css class "RowHighlight" as:

RowHighlight td
{
   background-color:red;
}

So you will apply the background to all the cells in that row.

And for add and remove the class in the jQuery use the ToggleClass(), you can find more info about it in the jQuery site