jquery.wholly.jsを使って、テーブルの列をハイライト

オンマウスのテーブルハイライトとしては、多機能な「jquery.tablehover.js」がありますが、複数のスクリプトを使用するため、構成がやや複雑で、総計するとかなり重くなります。それに対して、列だけに限るならこのjquery.wholly.jsのほうが、軽量でかつ簡単に実装できます。

基本は、オンマウスで、td、thにaddClassし、マウスアウトでremoveClassしています。

table.on('wholly.mouseenter', 'td, th', function () {
           $(this).addClass('wholly-highlight');}); //背景が薄いブルー

また、特定のtd、thに違うCSSを適用することも可能です。

table.on('wholly.mouseenter', '.exclass', function () {
           $(this).addClass('wholly-highlight2');}); //背景が薄い赤紫
テストテーブル
A B C D
A+ A- B+ B- C+ C- D+ D-
119 94 89 28 22 12 41 14
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 - - -
※引用、参考:https://github.com/gajus/wholly
戻るボタン