siblingでまとめて背景色を変更

Js


nextSibling,previousSiblingメソッドを使うと同じ階層のノード間を移動することが出来る。
これを使って同じtrタグの背景色を変更してみる。


sibling.html　表示用ＨＴＭＬ

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

	<table>
		<tr rowNum="1" class="line0">
			<td>aa</td><td>aa</td>
		</tr>
		<tr rowNum="1" class="line0">
			<td>aa2</td><td>aa2</td>
		</tr>
		<tr rowNum="2" class="line0">
			<td>bb</td><td>bb</td>
		</tr>
		<tr rowNum="2" class="line0">
			<td>bb2</td><td>bb2</td>
		</tr>
		<tr rowNum="3" class="line0">
			<td>cc</td><td>cc</td>
		</tr>
		<tr rowNum="3" class="line0">
			<td>cc2</td><td>cc2</td>
		</tr>
	</table>
<body>
</html>

stylesheet.css　スタイルシート。ここでBEHAVIORファイルが指定されている。

/*** 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>

colorchange2.js ※イベントから呼び出されるスクリプト

function rowActive(obj) {
	var sibling0;
	var sibling1;


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

	obj.style.backgroundColor="yellow";

	sibling0 = obj;
	while(true){
		sibling1 = sibling0.nextSibling;
		if ( sibling1 == null ) {
			break;
		}

		sibling1.defaultColor = obj.defaultColor;
		sibling1.style.backgroundColor="yellow";
		sibling0 = sibling1;
	}

	sibling0 = obj;
	while(true){
		sibling1 = sibling0.previousSibling;
		if ( sibling1 == null ) {
			break;
		}

		sibling1.defaultColor = obj.defaultColor;
		sibling1.style.backgroundColor="yellow";
		sibling0 = sibling1;
	}

}


function rowNonActive(obj) {
	var sibling0;
	var sibling1;

	obj.style.backgroundColor=obj.defaultColor;

	sibling0 = obj;
	while(true){
		sibling1 = sibling0.nextSibling;
		if ( sibling1 == null ) {
			break;
		}

		sibling1.style.backgroundColor=obj.defaultColor;
		sibling0 = sibling1;
	}

	sibling0 = obj;
	while(true){
		sibling1 = sibling0.previousSibling;
		if ( sibling1 == null ) {
			break;
		}

		sibling1.style.backgroundColor=obj.defaultColor;
		sibling0 = sibling1;
	}

}