jQuery Table Hover Plugin Examples
Example one:
- simple row highlighting using the default settings
$('#tableone').tableHover();
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
Example two:
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
$('#tabletwo').tableHover({colClass: 'hover'});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
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'});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
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'});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
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});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
Example six:
- -using colspans and rowspans-
- simple row highlighting using the default settings
- simple column highlighting using css class "hover"
$('#tablesix').tableHover({colClass: 'hover'});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
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});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |
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]});
A |
B |
C |
D |
A+ |
A- |
B+ |
B- |
C+ |
C- |
D+ |
D- |
11 |
4 |
9 |
8 |
2 |
2 |
1 |
4 |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
- |
X |
- |
- |
- |
- |
- |
- |
- |
X |
- |
X |
X |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
- |
X |
X |
- |
- |
- |
X |
X |
X |
- |
X |
- |
X |
- |
X |
X |
X |
- |
X |
- |
- |
- |
- |
X |
X |
- |
X |
- |
- |
X |
- |
X |
- |
X |
- |
X |
- |
- |
- |
X |
- |
X |
X |
- |
- |
- |
- |
X |
X |
X |
- |
- |
- |
- |
- |