Javascript変更テーブルの背景色のサンプルコード共有

著者：Eve Cole 更新時間：2025-01-18 15:00:03

次のようにコードをコピーします。

<html>

<スクリプト>

//現在選択されている行をクリックしたときに現在の行の色を設定し、現在の行以外の行の色とマウスイベントを復元します。

関数 selectRow(ターゲット)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //最初の行を除くすべての行を走査します

{

if (sTable.rows[i] != target) //行が現在選択されているかどうかを判断します

{

sTable.rows[i].bgColor = "#ffffff"; //背景色を設定します。

sTable.rows[i].onmouseover =resumeRowOver //onmouseoverイベントを追加します。

sTable.rows[i].onmouseout =resumeRowOut;//onmouseoutイベントを追加

}

それ以外

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = "" //マウスイベントを削除します。

sTable.rows[i].onmouseout = "" //マウスイベントを削除します。

}

//移動時のtrの背景色

関数 rowOver(ターゲット)

{

target.bgColor='#e4e4e4';

}

// 移動時のtrの背景色

関数 rowOut(ターゲット)

{

target.bgColor='#ffffff';

}

//関数の呼び出しをサポートする tr の onmouseover イベントを復元します

関数resumeRowOver()

{

rowOver(this);

}

//関数の呼び出しをサポートする tr の onmouseout イベントを復元します

関数resumeRowOut()

{

rowOut(this);

}

</script>

<本文>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">最後の 2 つの関数resumeRowOverとresumeRowOutについては、以前に書いたものを参照してください。 js HTMLview plaincopy to Clipboardprintを介して、イベントに対応するテーブルをページ要素に追加しますか?

</div>

<tr>

<th>サービスが重要</th>

<th>ステータス</th>

</tr>

<td>関連コンテンツ</td>

</tr>

<td>関連コンテンツ</td>

</tr>

<td>関連コンテンツ</td>

</tr>

<td>関連コンテンツ</td>

</tr>

</テーブル>

</body>

</html>