Highlight a Table Row using jQuery CodeUnit 26 JAN 2010

Using jQuery to highlight a table row on mouse over is pretty simple to achieve, and today I’ll quickly demonstrate how you can achieve this neat effect using the addClass and removeClass jQuery functionalities.

First, you need to define your CSS style to be applied to the row you are hovering over, picking out some CSS attributes that you wish to manipulate. In our case, we’re going to be changing the background-color property and thus our CSS style entry looks like this:

.datahighlight {
        background-color: #ffdc87 !important;
}

Next, we force all the rows in our table to be a member of a specific class:

Text Row to be highlighted

Finally, we apply the jQuery code:

      $(document).ready(function(){
		$('.simplehighlight').hover(function(){
			$(this).children().addClass('datahighlight');
		},function(){
			$(this).children().removeClass('datahighlight');
		});
      });

As you can see, all the jQuery magic is doing on mouse over of any element with the class ‘simplehighlight’ applied is adding a class ‘datahighlight’ to all the child elements of that selected element (the one being hovered above), in our case those being the actual cells of the row. Seeing as the !important rule is applied to the simplehighlight definition, those cell backgrounds are forced to the new color definition, giving the appearance of a row highlight.

On mouse out, the datahighlight class is removed, forcing all of the child elements (once again our cells) to return to their normal background color schemes.

It’s simple, easy to implement, and highly effective, as shown by the example below:

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.

  • john clady

    as you said i added the code in style.css sheet and i also i done adding the tr code.

    but i do know where to add the jQuery code:

    please help me

  • john clady

    as you said i added the code in style.css sheet and i also i done adding the tr code.

    but i do know where to add the jQuery code:

    please help me

  • Hi John. The jQuery code can literally go anywhere in the script, though standard has it that it usually gets put in the head section of your page. Copying and pasting the code snippets as is should make it work right out of the box to be honest.
    .-= Craig´s last blog ..And so the Quest to Become a Father Begins =-.

  • Hi John. The jQuery code can literally go anywhere in the script, though standard has it that it usually gets put in the head section of your page. Copying and pasting the code snippets as is should make it work right out of the box to be honest.
    .-= Craig´s last blog ..And so the Quest to Become a Father Begins =-.

  • Rahiwadhva

    thank

  • @john – Maybe just to add an extra tip for performance. It's considered a best practice on Yahoo to place JavaScript at the bottom of your page. I usually include mine just before the closing </body> tag.
    Check this link out on Yahoo, http://developer.yahoo.com/performance/rules.ht

    @Craig – You interviewed me for a job at Touchwork. Bjorn Theart, live in Strand, going to the US, any of this ring a bell? :-)

  • Hey, fancy that! Howzit Bjorn, small world indeed! Thanks for the tip!

  • Viswanathnk

    how to do , onclick stay with one color, if i click on new row , the previous hilighted row come to normal , new one should be hilight?

    • Kiran

      Did you figure this out ?

    • Like this:

          .selectedrow{
              background-color: #FFFEC9;
          }

      $(‘.simplehighlight’).click(function() {
                      $(‘.selectedrow’).removeClass(‘selectedrow’);
                      $(this).children().addClass(‘selectedrow’);
                  });

  • every post very useful

  • @RPG90

    I just wanted to say I’ve tried many different tutorials to achieve this effect and this was the only one that would work flawlessly, thanks!

  • A A

    This is really nice! simple but nice.
    I will use it but with FIND…

  • Sam

    S

  • Sam

    I’ve delved right into jquery and full js as of late, and I’m amazed at how easy jquery makes it to manipulated the dom.

  • Jaiswar Vipin Kumar R

    $(‘table.tblMenuTabls tr’).hover(function(){
                $(this).toggleClass(‘tblOverRow’);
                },function(){
                    $(this).toggleClass(‘tblOverRow’)}
            ).css({cursor: ‘hand’});

    • Yup. Will work just fine. Though I’m not sure you necessarily want to force the hand cursor unless you’ve tied some actions to cell clicks.

  • Hi there also if you are using / tailoring for IE and hover just doesn`t seem to work try cssHover3
    its a .htc file you can add and it will correct errant hover behaviours in IE …
    saved my issues…

  • Youven88

    thanx u very much