Question

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:

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!

Answer 1

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

Javascript:

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