Web ページ上のテーブル行の JavaScript コードを強調表示する_JavaScript テクニック

;





>



tr class="oddRow">

">









次に CSS を使用してテーブルのスタイルを定義します:




コードをコピーします


コードは次のとおりです:


.datatable{ margin:15px auto;
width:500px; /*これらの 2 行は単なる例です* /
} } }


IE6 での表示を修正するために、trHover クラスがここに追加されます。次のステップは JavaScript を書くことです。最初のアイデアは非常に単純です。マウスをポイントしたときに現在の行を強調表示したいと思いませんか。したがって、各行に javascipt を適用するだけです。まずJavaScript関数を書きます。統一するために、強調表示と強調表示の取り消しを 1 つの関数に結合し、関数呼び出しを tr のマウスオーバー イベントとマウスアウト イベントにバインドするだけで簡略化できるようにしました。 コードは次のとおりです。o.className =" trHover";
else
o.className=o.className.replace(regStr,"");
;ValueValue1


すべての tr のイベント バインディングを記述するだけです。ただし、これには次の問題もあります。 1. ページ上のコードの量が増加します。 2. テーブルがバックグラウンド サーバー プログラムによって出力される場合、JavaScript 関数を tr 要素にバインドできない場合があります。何をするか？直接的に考えると、js を使用してページの特定の範囲でこのスタイルのテーブルを検索し、tr イベントをバインドできます。しかし、今日は考え方を変えて、js イベントをテーブル要素に直接バインドして、特定の行を強調表示してみましょう。
この考えには十分な根拠があります。これはブラウザのイベント モデルについて話さなければなりません。歴史的な理由により、さまざまなブラウザーで JavaScript イベント応答の実装方法に違いがありますが、基本的な考え方は同じです。 js イベントは、W3C DOM でキャプチャ バブル モデルとして記述されます。簡単に言うと、餃子を作るのと似ています。餃子は徐々に鍋の底に沈み、熱を受け入れてゆっくりと上に浮き上がります。モデル自体に戻ると、JavaScript イベントには 2 つの主要なカテゴリがあります。まず、最も外側の要素からイベントをキャプチャし、それをイベントをトリガーした要素に徐々に内部に渡します。これはイベント キャプチャと呼ばれ、次に徐々に外側に拡張されます。外側の要素 - これはイベント バブリングと呼ばれます。 IE の実装はキャプチャ タイプのイベントをサポートしていません。また、バブリング イベントの実装は W3C DOM 標準とは若干異なりますが、全体的な考え方は同じです。
長い間話してきましたが、テーブルの行を強調表示するという目的を達成するために、イベント バブリング処理メカニズムを使用したいだけです。
再び、泡立つイベントは、ちょうど石によって引き起こされる波紋のように、JavaScript イベントをトリガーする最も内側の要素から外側の層に広がります。マウスが特定の行上をスライドすると、最初に td 内のテキストやその他の要素などの最も内側の要素がマウスオーバーをトリガーし、次にそれが td-->tr-->tbody-->table に渡されて、マウスオーバー イベントが発生し、マウスが外に移動すると、この連続的なバブリング プロセスも発生します。これが私たちがインシデント対応者にアプローチする方法です。
まず、XHMTL のイベント バインディング コードを変更する必要があります。 tr 要素内の Mouseover および Mouseout イベント処理を削除し、テーブルにイベント処理を追加します。最終的なテーブルは次のようになります。

アイテム







;td> ;ItemItem2






td>ValueValue6



これは、最初に作成したテーブルと似ています。これにより、テーブル要素の js イベント バインディングが増えるだけになります。次のステップは、highlightTr 関数に対して大規模な手術を実行することです。ここでは、最初に最終コードを投稿してから、一緒に分析します:




コードをコピーします


コードは次のとおりです:

ItemItem1
ItemItem2
ItemItem3
ItemItem4	ValueValue4
ItemItem5	ValueValue5	ValueValue6
Item1
ItemItem1	ValueValue1
ValueValue2
;ValueValue3	ValueValue4	ValueValue5	ItemItem6