Reputation: 39524
On an HTML table, when a mouse is over a cell (TD), I would like to:
Add the css class "Highlight_TR_TH" to the cell's row.
Add the css class "Highlight_TD" to all cell on the same row
Add the css class "Highlight_This_Cell" to the cell itself.
Basically, I am looking to change the background color of this elements.
How can I do this?
Upvotes: 0
Views: 3345
Reputation: 14827
Try this:
$('td').each(function() {
$(this).mouseover(function() {
$(this).addClass('Highlight_This_Cell').siblings('td').addClass('Highlight_TD');
$(this).parent().addClass('Highlight_TR_TH');
});
});
Upvotes: 0
Reputation: 671
$('td').hover(function(){
$(this).addClass('highlight_this_cell');
$(this).parent().addClass('highlight_tr');
$(this).parent().find('td').addClass('highlight_td');
},function(){
$(this).removeClass('highlight_this_cell');
$(this).parent().removeClass('highlight_tr');
$(this).parent().find('td').removeClass('highlight_td');
}
);
.hover()
takes two functions, the first one is executed on mouseover, the second on mouseleave.
Upvotes: 1
Reputation: 388446
$('td').hover(function(){
var $this = $(this);
$this.addClass('Highlight_TD Highlight_This_Cell');
$this.siblings().addClass('Highlight_TD');
$this.closest('tr').addClass('Highlight_TR_TH');
},function(){
var $this = $(this);
$this.removeClass('Highlight_TD Highlight_This_Cell');
$this.siblings().removeClass('Highlight_TD');
$this.closest('tr').removeClass('Highlight_TR_TH');
})
Demo: Fiddle
Upvotes: 1
Reputation: 5497
$("td").mouseover(function() {
$(this).parent().addClass("Highlight_TR_TH");
$(this).siblings("td").addClass("Highlight_TD");
$(this).addClass("Highlight_This_Cell");
});
You can chain those method calls, just displayed them that way for more readability.
If ever you wanted to remove the classes later on, you can use mouseleave
with the same structure above to do it.
(Although I believe that pure CSS can do what you want)
Upvotes: 0