jQuery tableHover pluginを使ってテーブルの行、列をハイライト。

行ごとにハイライト

オンマウス(hover)で、行ごとにハイライト。pluginデフォルト。
				
	$('#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 - - - - -

行と列ごとにハイライト

オンマウス(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 - - - - -

行と列ごとにハイライト。交差点のセルを選ぶ。

オンマウス(hover)で、行と列ごとにハイライト。交差点のセルをhovercelで選ぶ。クリックすると結果を残す。

	$('#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 - - - - -

行と列ごとにハイライト。交差点のセルを選ぶ-2。

オンマウス(hover)で、列ごとにtableヘッダー、tableフッターを含めてハイライト。行は色を変えてハイライト。交差点のセルをhovercelで選ぶ。クリックすると結果を残す。


	$('#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 - - - - -