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

この記事は開発検討ノートの一つとして機能します。
[Text]
Web 開発では、マウスがポイントしているテーブルの行を強調表示する必要がある状況によく遭遇します。まずは全体的な状況についてお話しましょう。
・簡単に試してみましょう
CSS2 では、HTML 要素にホバー疑似クラスを使用できるため、表スタイルの制御が大幅に容易になります。
小さな例から始めます:
XHTML (テーブル部分のみがリストされています。ページを自分で完成させてください。この例は Transational の DTD の下に渡されます):

コードをコピーします コードは次のとおりです。

;





>



tr class="oddRow">

">









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




コードをコピーします


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


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

.datatable tr,.datatable td,.datatable .tableheader td{ border:1px #0073ac Solid; >padding:3px; } .datatable .tableheader td,.datatable th{ font-weight:bold; background:#fff url(images/thead.png) stop-x; padding:8px 5px;

}

.datatable tr:hover{
background-color:#cfe9f7;
}


これも説明しませんCSS 部分について詳しく説明します。最後の太字の部分は、tr 要素に擬似ホバー スタイルを適用していることに注意してください。これは、CSS2 をサポートするブラウザ (IE7、FF、Opera、Safari など) で完全に機能します。ただし、CSS1 はアンカー要素 a に対してのみ疑似クラスをサポートします。残念ながら、IE6 は依然として CSS1 疑似クラスのみをサポートします。したがって、IE6 をサポートするために変更を加える必要があります。
最初にスタイルを追加します:




コードをコピーします


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


.datatable .trHover ,.datatable tr:hover{
background-color:#cfe9f7;

}


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

コードをコピーします

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

function hiddenTr(o){
var regStr= /bs*trHoverb/g; /*正規表現フィルター trHover クラス*/
if(o.className.indexOf('trHover')==-1)

o.className =" trHover";
else
o.className=o.className.replace(regStr,"");

} ここでは、正規表現の置換という小さなトリックが使用されています。 tr 要素には他のスタイル (クラス) (この例ではevenRow や oddRow など) が含まれている可能性があるため、強調表示を解除するときにオブジェクトの className を単純に空白のままにすることはできません。次に、誰もが想像したとおり、イベントを tr にバインドします:

コードをコピーします


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

;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