CODEWITHSUNDEEP
jquery
jmorhardt
jmorhardt

Reputation: 183

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:

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!

Upvotes: 3

Views: 12261

Answers (2)

pjnovas
pjnovas

Reputation: 1126

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

Upvotes: 1

Philippe Leybaert
Philippe Leybaert

Reputation: 171914

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

Javascript:

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

Upvotes: 14

Related Questions