Reputation: 183
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:
Any help appreciated. Thanks!
Upvotes: 3
Views: 12261
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
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