Basic Highlighter Directive for AngularJS

The only thing this very basic Angular directive does is highlight a table row when you click it. The repeat click removes the highlight.

app.directive('highlight', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('click', function (evt) {           
                if (evt.target.nodeName == 'TD') {
                    var tr = evt.target.parentNode;
                    if (!tr.onfire) {
                        tr.style.backgroundColor = "#F3F781";
                        tr.onfire = true;
                    }
                    else {
                        tr.style.backgroundColor = "";
                        tr.onfire = false;
                    }
                }   
            });
        }
    };
});

jQuery.Colorize 1.7.0

A new version of jQuery.Colorize plugin is available here.

The latest version number is 1.7.0.
This version features a faster load time when the 'rows' option is used.

A plugin demo can be found here.

To use the plugin you need a reference to jQuery library, and the following JavaScript statement:

$(document).ready(function(){
     $('#myTableId').colorize(); }
);
This statement uses default options. Other options are listed in this post.

How to use tablesorter plugin with jQuery.Colorize

If you try to use Colorize plugin along with the wonderful tablesorter plugin with default options, it will work nicely on page load until you try sorting table columns. This will skew all row background coloring. The proper way to use both plugins together is to use the tablesorter 'zebra' widget for alternative row coloring, and the altColor:'none' option in Colorize plugin. Don't forget to declare a style for odd rows in your stylesheet, e.g.: tr.odd {background:#ECF6FC;}.

A usage example:

$("#myTable").tablesorter( {widgets: ['zebra'] }). colorize({ banDataClick: true,  altColor: 'none'});

jQuery.Colorize 1.6.1

I am the author of the jQuery.Colorize plugin. I lost access to the jQuery site that's why the new version is being published here.

The new version is a fork of version 1.6.0. It features a new option - startRow. For example, if your table has a header of 2 rows, and you want the header to be exempt from colorize effects, use the startRow option with the value of 2. (The row index starts from 0).

The full list of parameters is shown below:
altColor : alternate row background color, 'none' can be used for no alternate background color
* bgColor : background color (The default background color is white).
* hoverColor : background color when you hover a mouse over a row
* hoverClass: style class for mouseover; takes precedence over hoverColor property; may slow down performance in IE
* hiliteColor : row highlight background color, 'none' can be used for no highlight
* hiliteClass: style class for highlighting a row or a column; takes precedence over the hiliteColor setting
* oneClick : true/false(default) - if true, clicking a new row reverts the current highlighted row to the original background color
* columns : true/false/'hover', 'rowHover' - The default is false. if true, it highlights columns instead of rows. If the value is 'hover',  a column is highlighted on mouseover, but does not respond to clicking. Instead, a row is highlighted when clicked.  If the value is 'rowHover', a row is highlighted on mouseover, and a column is highlighted on click.
* banColumns : [] - columns not to be highlighted or hovered over; supply an array of column indices, starting from 0;
* 'last' value can be used to ban the last column
* banDataClick: true/false(default); if true, you can only click on the header rows
* ignoreHeaders:true(default)/false; if true, table headers are not colorized
* nested : true/false(default); use if you have nested tables in your main table
* rowStart; the first row index to apply mouseover and click effects; the default is 0.


The link to the new version is available here.

A plugin demo can be found here.