CODEWITHSUNDEEP
jquerycsshtml-table
Miguel Moura
Miguel Moura

Reputation: 39524

JQuery. Highlight table cells

On an HTML table, when a mouse is over a cell (TD), I would like to:

  1. Add the css class "Highlight_TR_TH" to the cell's row.

  2. Add the css class "Highlight_TD" to all cell on the same row

  3. 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

Answers (4)

Eli
Eli

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

skndstry
skndstry

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

Arun P Johny
Arun P Johny

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

Arnelle Balane
Arnelle Balane

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

Related Questions