効率的なテーブル行の背景色の変更と選択された強調表示された JS コード_JavaScript スキル

この JS を head に配置します

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

//現在の選択範囲をクリックします ローイング時に現在の行の色を設定し、同時に現在の行以外の行の色とマウス イベントを復元します
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i{
if (sTable.rows [i] != target) // 行が現在選択されているかどうかを判断します
{
sTable.rows[i].bgColor = "#ffffff"; // 背景色を設定します
sTable.rows[ i].onmouseover =resumeRowOver; //onmouseover Event
sTable.rows[i].onmouseout =umeRowOut;//onmouseout イベントを追加
}
else
{
sTable.rows[ i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; //マウス イベントを削除します
sTable.rows[i].onmouseout = "";
}
}
}
//移動時の tr の背景色
function rowOver(target)
{
target.bgColor='#e4e4e4'; 🎜>}
//移動時の tr の背景 Color
function rowOut(target)
{
target.bgColor='#ffffff';
}
//復元呼び出し関数
関数をサポートする tr の onmouseover イベント、resumeRowOver()
{
rowOver(this)
}
//呼び出し関数
関数、resumeRowOut() をサポートする tr の onmouseout イベントを復元します。 >{
rowOut(this);
}


最後の 2 つの関数 raiseRowOver とresumeRowOut がこのように書かれている理由については、以前に書いた、ページ要素へのイベントの追加を参照してください。 js

対応するテーブル HTML

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

< ;table width="100%" border="0" cellpadding="0" id="ServiceListTable">

サービスに関する事項


;ステータス






>

関連コンテンツ ;





関連コンテンツ


>

関連コンテンツ ;





関連コンテンツ


>