jquery实现的超帅动态表格变色效果_时代Java（NowJava.com） -JS/jQuery代码 -演示与下载 -时代Java
jQuery tableHover plugin
Example one:
- simple row highlighting using the default settings
$('#tableone').tableHover();
Example two:
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
$('#tabletwo').tableHover({colClass: 'hover'});
Example three:
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
- higlight the current cell using css class "hovercell"
- fix the current highlight on click using css class "click"
$('#tablethree').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'});
Example four:
- column highlighting using css class "hover"
- disallow highlighting through the body (highlight only over header and footer)
- fix the current highlight on click using css class "click"
$('#tablefour').tableHover({colClass: 'hover', allowBody: false, clickClass: 'click'});
Example five:
- row highlighting using css class "hoverrow"
- column highlighting using css class "hover"
- fix the current highlight on click using css class "click"
- allow highlighting rows in the header
- allow highlighting rows in the footer
- allow highlighting columns in the header
- allow highlighting columns in the footer
$('#tablefive').tableHover({rowClass: 'hoverrow', colClass: 'hover', clickClass: 'click', headRows: true,
footRows: true, headCols: true, footCols: true});
Example six:
- -using colspans and rowspans-
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
$('#tablesix').tableHover({colClass: 'hover'});
Example seven:
- -using colspans and rowspans-
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
- dont highlight spanned rows when hovering over a cell with rowspan set
- dont highlight spanned columns when hovering over a cell with colspan set
$('#tableseven').tableHover({colClass: 'hover', spanRows: false, spanCols: false});
Example eight:
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
- ignore columns "B-", 'C+' and "C-"
$('#tableeight').tableHover({colClass: 'hover', ignoreCols: [4,5,6]});
X关闭jquery实现的超帅动态表格交叉变色高亮显示效果
jquery实现的超帅动态表格变色效果，鼠标滑过表格时可以控制表格行、列或者交叉变色高亮显示，经测试效果非常不错，简单实用。