Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.
How to use it?
Use it with default options (colorizes a row)$('#yourTableId').colorize() ;
Optional parameters:
altColor : alternate row background color. The default is '#ECF6FC'.
bgColor : background color (The default background color is white).
hoverColor : background color when you hover a mouse over a row. The default is '#BCD4EC'.
hiliteColor : row highlight color. The default color is 'yellow'. 'none' can be used to disable highlighting.
hiliteClass : style class to be used to highlight a row or a column, takes precedence over the hiliteColor setting.
columns : true/false - Highlights columns instead of rows. The default is false.
oneClick : true/false - Allows only one row or column to be highlighted at a time. A click on a new row/column cancels the current highlight. The default is false. (Probably, not the best name for this option).
banColumns :[]- Prevents columns from being highlighted when clicked, and also on mouseover. Supply an array of column indices as an argument.
Examples:
The order of parameters is not important.$('#yourTableId').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red'});
$('#yourTableId').colorize({ oneClick:true});
$('#yourTableId').colorize({columns:true, banColumns :[0,1]});
$('#yourTableId').colorize({ hiliteClass:'myStyle'});
No highlighting:$('#yourTableId').colorize( { hiliteColor:'none' } );
Demo 1 - Usage with default options: $('#tblId').colorize();
Demo 2 - Highlights columns, one column at at time. Usage : $('#tblId').colorize( {columns: true, oneClick:true} );
Download Colorize 1.4.0 plugin
Version History
Version 1.4.0 introduced a new option, hiliteClass, to indicate a style class to be used for highlighting (thanks to a tip from Skye Giordano). Also, the banColumns option now suppresses not only highlighting but also hover.
Version 1.3.0 allows to use the banColumns option even if the columns parameter is false (thanks to the code contributed by Aymeric Augustin)
Version 1.2.1 introduced a new feature : disable highlighting (thanks to a user comment):
Use 'none' value for hiliteColor option if you want to disable highlighting
Version 1.2.0 introduced new options :columns : true/false oneClick : true/false banColumns :[]
Version 1.1.0 fixed a bug in the original version that highlighted all the tables on a page.
Sites Using the Colorize Plugin
If your site uses the Colorize plugin, and you would like to see it listed on this page, please use the feedback form to send me the link.
row_column색깔주기.zip