Colorize - jQuery表格插件

Colorize是一个用来增加HTML表格行背景色交互的jQuery插件，鼠标悬停时行/列高亮，点击鼠标时行/列变色，可以用来对多行（多列）表格按要求进行变色，再次鼠标点击时将恢复行/列原来背景色。

 

如何使用?

使用默认选项（行变色）

$('#yourTableId').colorize() ;

 

可选参数:

altColor： 行背景交互色。默认为 '#ECF6FC'， 设置为 'none' 则不使用背景交互色。
bgColor： 背景色（默认背景色为白色）。
hoverColor： 当鼠标在行上悬停时的背景色。默认为 '#BCD4EC'。
hoverClass：mouseover样式类；hoverColor属性优先。
hiliteColor：行高亮色。默认为 'yellow'，设置为 'none' 时关闭高亮。
hiliteClass：行或列高亮时使用的样式类，当设置了hiliteColor时被优先使用。
columns：最新版本中不赞成使用，被click和hover选项代替。
hover - 设置mouseover特性，可使用如下值：'row'、'column'、'cross' 。默认值为 'row'。
click - 设置鼠标点击时的高亮选项，可用值：'row'、'column'、 'cross'。当设置为 'row'，点击时行高亮；当设置为 'column'，点击时列高亮；当设置为 'cross'，点击时行和列同时高亮。默认值为 'row'。
oneClick：true/false - 每次只允许一行或一列高亮，当点击新行/新列时取消当前高亮。默认为false。
banColumns：[ ]- 防止某些列点击时高亮，还有鼠标悬停时也一样。可提交一个列数组作为参数，当使用'last'值时最后一列不能高亮。
banRows：[ ]- 防止某些行高亮，可提交一个行数组作为参数。
banDataClick：true/false - 如果为true，你只能点击表头行。默认为为false。
ignoreHeaders：true/false - 如果为true，表头行不变色（没有斑马线）。默认为true。
nested：true/false-默认为false。如果一个表中嵌套有表格，使用它可获得一致的斑马线。
 

示例:

 

参数顺序不重要，因此无须按顺序排列。

$('#yourTableId').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red'});
$('#yourTableId').colorize({ oneClick:true});
$('#yourTableId').colorize({hover='column', click='column', banColumns :[0,1]});
$('#yourTableId').colorize({hover='cross', click='column'});
$('#yourTableId').colorize({ hiliteClass:'myStyle'});

 

不使用高亮:

$('#yourTableId').colorize( { hiliteColor:'none' } );

 

下载页面：

 

http://franca.exofire.net/jq/colorize

 

演示页面：

 

演示1     演示2