jQuery columnHover plugin
Example one:
- allow column hovering/highlighting for the table with the ID attribute "#tableone"
$('#tableone').columnHover();
| 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:
- allow column hovering/highlighting for the table with the ID attribute "#tabletwo"
- allow highlighting even when hovering inside the table body and table footer
- sets the style class "betterhover" to the cells in the column with the mouse over
$('#tabletwo').columnHover({eachCell:true, hoverClass:'betterhover'});
| 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:
- same as above with some rowspans and colspans
$('#tablethree').columnHover({eachCell:true, hoverClass:'betterhover'});
| 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 four:
- again same as above with some rowspans and colspans but set to not include the colspans in the body in the process
$('#tablefour').columnHover({eachCell:true, hoverClass:'betterhover', includeSpans: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 five:
- allow column hovering/highlighting for the table with the ID attribute "#tablefive"
- allow highlighting even when hovering inside the table body and table footer
- sets the style class "betterhover" to the cells in the column with the mouse over
- ignore columns "C" and "D"
$('#tablefive').columnHover({eachCell:true, hoverClass:'betterhover', ignoreCols: [5, 6, 7, 8]});
| 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 | - | - | - | - | - |