JS マウスホバーする行列をハイライト表示

1.1 問題説明

1）マウスオーバーする時背景色を変更する効果は、 contentPane.makeHighlight('red','mouseover')で実現出来ます。でも、下記の状況には無効になります。

セルがすでに背景色を設定済み、或いは条件属性で背景色を設定済み

行列の固定がる場合、固定の部分は背景色を変更できません

2）今回は下記の効果を実現する方法を紹介します：

マウスオーバーする時、行/列の背景色を同時にハイライト表示

マウスオーバーする時、行と列の背景色を同時にハイライト表示

1.2 実現方法

マウスオーバーする時、その行の元背景色を取得して、新しい背景色に設定する。

マウスが離す時、元の背景色に戻す。

「テンプレート⇒テンプレートWeb属性⇒改ページプレビュー」

「テンプレート個別設定」

「ロード完了」イベントを追加：

※Javascript文は各テンプレートをダウンロードしてから確認できます。

※モバイル側は利用できません

2.1 行の背景色を変更

1) マウスオーバー背景色変更、効果

※テンプレート（Javascript文を参照してください）：

JSマウスホバーする行列をハイライト表示-1.cpt

2）マウスオーバー背景色変更＋クリック背景色変更、効果

※テンプレート（Javascript文を参照してください）：

JSマウスホバーする行列をハイライト表示-2.cpt

2.2 列の背景色を変更

列の背景色を変更、効果：

※テンプレート（Javascript文を参照してください）：

JSマウスホバーする行列をハイライト表示-3.cpt

2.3 行と列の背景色を変更

同時に行と列の背景色を変更、効果：

※テンプレート（Javascript文を参照してください）：

JSマウスホバーする行列をハイライト表示-4.cpt

2.4 行（ヘッダー部分以外）の背景色を変更

マウスオーバーする時、すべての行ではなく（例えばヘッダー部分は不要）一部の行のみをハイライト表示することがあります。

実現方法：「ロード完了」イベントのJavascript文を少し編集すれば実現できます。

ヘッダー行を除外：一行目がNの場合、JSの $(".x-table tr").bind("mouseenter", function () { }を$('.x-table tr:gt(N-1)') .bind("mouseenter", function () { }に変更します。

※テンプレート（Javascript文を参照してください）：

JSマウスホバーする行列をハイライト表示-5.cpt