めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

HTMLのテーブルを1段ごとに色違いにするJavaScript

HTMLのテーブルを1段ごとに色違いにするJavaScriptを、ふと思って作ってみました。
prototype.jsを使いましたが、なくてもいける短いソースです。

使い方

startTableというクラスからスタートして、endTableクラスまで奇数、偶数のtrにclassをつけていきます。endTableがなければ最後まで処理を続けます。指定したいテーブルには、idをつけておいてください。

確認

ff2でしか確認していません。
たぶん、他でも動きそう

ソース

<table cellpadding="0" cellspacing="0" border="1" id="targetTable">
	<tr>
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr class="startTable">
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr>
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr>
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr>
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr class="endTable">
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
	<tr>
		<th>あれこれ</th>
		<td>どこそこ</td>
	</tr>
</table>
function tableDifferent(targetTable, evenClassName, oddClassName){
	var elements= $(targetTable).getElementsByTagName('tr');
	var startFlag = '';

	for(var i=0; i<elements.length; i++){
		if(elements[i].className == 'startTable'){
			startFlag = 1;
		}

		if(elements[i].className == 'endTable'){
			startFlag = '';
		}

		if(startFlag == 1 && i%2 == 0){
			elements[i].className += evenClassName;
		}else{
			elements[i].className += oddClassName;
		}
	}
}