A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Hightlight a table row on click using jQuery

The scenario: Every time you click on a row, the row highlights. When you click on the highlighted row – remove the highlight.
The jQuery / Javascript code:

//highligths the clicked row
function highlightrow(obj) {
    if ($(obj).attr("style")=='background-color: rgb(255, 255, 187);' || $(obj).attr("style")=='BACKGROUND-COLOR: #ffffbb') {
        $(obj).removeAttr("style");
    } else {
        $(obj).attr("style","background-color: #FFFFBB;");
    }
}

And for the HTML Code:

..rest of the HTML tags here...
< tr onclick="highlightrow(this);" >
..rest of the HTML tags here...
This entry was posted in General and tagged , , . Bookmark the permalink.

4 Responses to Hightlight a table row on click using jQuery

  1. Wenbert says:

    The reason for having this:
    background-color: rgb(255, 255, 187);
    and
    BACKGROUND-COLOR: #ffffbb
    is because Firefox returns: background-color: rgb(255, 255, 187); while IE returns something like this: BACKGROUND-COLOR: #ffffbb

  2. Chris says:

    Hey wenbert, try not using .attr(‘style’) but rather use the built-in jQuery css functions!
    Your code will mess up style, if you have other style definitions in the tag…

    JS:

    $(document).ready(function(){
      $("tr").click(function() {
        $(this).toggleClass("active");
      }
    });
    

    CSS:

    .active { /*highlight class, add a background color, change the border or font color, whatever */
      border: 1px dashed red;
      background-color: green; 
    }
    

    HTML:
    ………

  3. Dan says:

    working perfect for firspage in jquery datatable.

    may i know how to apply for all the pages?

    Thanks
    Dan

Leave a Reply to Dan Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>