BEHAVIORで背景色変更

Js

BEHAVIORを使ったテーブルの選択した行の背景を変更するプログラム。
別にBEHAVIORは使わんでもできると思うが・・・


test.html(ＨＴＭＬ)

<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="colorchange.js"></script>
<body>

	<table>
		<tr rowNum="1" class="line0">
			<td>aa</td><td>aa</td>
			<td>
			<table>
				<tr>
					<td>aa</td><td>aa-1</td>
				</tr>
				<tr>
					<td>bb</td><td>aa-2</td>
				</tr>
				<tr>
					<td>cc</td><td>aa-3</td>
				</tr>
			</table>
			<td>

		</tr>
		<tr rowNum="2" class="line0">
			<td>bb</td><td>bb</td>
		</tr>
		<tr rowNum="3" class="line0">
			<td>cc</td><td>cc</td>
		</tr>
	</table>
<body>
</html>


stylesheet.css(スタイルシート)

/*** color style start ***/
.line0 {
	height : 23px;
	vertical-align: middle;
	background-color: #ECFDFF;
	border-right: #77B4EA 1px solid;
	border-top: #77B4EA 1px solid;
	border-left: #77B4EA 1px solid;
	border-bottom: #77B4EA 1px solid;
	BEHAVIOR:url("rowcolor.htc");
	font-family:"ＭＳ ゴシック";
}


rowcolor.htc　BEHAVIORファイル。イベントを定義している。

<public:component>
<public:attach event="onmouseover" onevent="rowActive(element)" />
<public:attach event="onmouseout"  onevent="rowNonActive(element)" />
</public:component>


colorchange.js　(BEHAVIORから呼ばれるJs)

// 選択した行の背景色を変える
function rowActive(obj) {

	if ( typeof(obj.defaultColor) == "undefined" ) {
		obj.defaultColor = obj.style.backgroundColor;
	}

	obj.style.backgroundColor="red";
	sibling0 = obj;

}


// 選択が解除された行の背景色を変える
function rowNonActive(obj) {

	obj.style.backgroundColor=obj.defaultColor;

}