ストライプテーブル

概要

table 要素の行に交互に装飾を変えたい場合に便利なスクリプトです。

このスクリプトを使用すると、HTML 内の全ての table 要素の tr 要素に対して、その class 属性値に交互に odd または even を追加します。ただし、中身が th 要素だけの tr 要素、または、thead 要素内の tr 要素は除外します。

また、table 要素の中に更に table 要素がネストされている場合でも問題なく動作します。

説明

例えば

<table>
<tr>
<th>見出し<th><th>見出し</th>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
</table>

のようなコードは、スクリプトによって、tr 要素の class 属性値に odd または even が付与され

<table>
<tr>
<th>見出し<th><th>見出し</th>
</tr>
<tr class="odd">
<td>データ</td><td>データ</td>
</tr>
<tr class="even">
<td>データ</td><td>データ</td>
</tr>
<tr class="odd">
<td>データ</td><td>データ</td>
</tr>
</table>

となります。

複数の行を 1セットとしたい場合

rowspan 属性を用いたときなどに複数の行を 1セットとしたい場合には tr 要素の class 属性値を

rowN-TOTAL

のようにしてください。TOTALはグルーピングする行の数、Nは現在のtr要素でTOTALの内のN番目としてください。

例えば、3つの tr 要素を 1セットとしたい場合には

<tr class="row1-3"></tr>
<tr class="row2-3"></tr>
<tr class="row3-3"></tr>

とします。

詳しくは動作確認用の demo内の複数の行を 1セットとしたい場合をご覧下さい。

使い方

ダウンロードした stripedtable.js を XHTML ファイルの head 要素内などで読み込んでください。

<script type="text/javascript" src="js/stripedtable.js"></script>

css を用いて、tr.odd 内の th 要素または td 要素と、tr.even 内の th 要素または td 要素に対してスタイルを指定してください。

例

table tr.odd td{ /*奇数列の装飾*/ }
table tr.even td{ /*偶数列の装飾*/ }

ソースコード

/
*====================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////

 Author : http://www.yomotsu.net
 created: 2007/05/24
 update : 2008/05/09
 Licensed under the GNU Lesser General Public License
 tr要素に交互にclassを付与するためのスクリプト

//////////////////////////////////////////////////////////////////////////////////////////////////////

====================================================================================================*/

var yomotsuStripedTable = {
	
	main : function(){
		var table = document.getElementsByTagName("table"),
		tr, i, j, k, oddRow, headRow, group, currentNum, totalNum;
		
		for(var i=0; i<table.length; i++){
			tr = table[i].getElementsByTagName("tr");
			oddRow  = true; //true = odd, false = even
			
			for(var j=0; j<tr.length; j++){
				headRow = true;
				
				if(tr[j].parentNode.nodeName.toLowerCase() == "thead"){
					headRow = true;
				}
				else{
					for(var k=0; k <tr[j].childNodes.length; k++){
						if(tr[j].childNodes[k].nodeName.toLowerCase() == "td"){
							headRow = false;
						}
					}
				}
				
				if(!headRow&&(tr[j].parentNode.parentNode==table[i]||tr[j].parentNode==table[i])){
					tr[j].className += oddRow ? " odd" : " even";
					
					if(tr[j].className.match(/\brow[0-9]+-[0-9]+\b/)){
						group = String(tr[j].className.match(/\brow[0-9]+-[0-9]+\b/));
						currentNum = group.slice(group.indexOf("row")+3,group.indexOf("-"));
						totalNum   = group.slice(group.indexOf("-")+1,group.length);
						if(currentNum == totalNum){
							oddRow = oddRow ? false : true;
						}
					}					
					else{				
						oddRow = oddRow ? false : true;
					}
				}
				else{	oddRow = true;	}
				
			}
		}
	},
	
	addEvent : function(){
		try {
			window.addEventListener('load', this.main, false);
		} catch (e) {
			window.attachEvent('onload', this.main);
		}
	}
}

yomotsuStripedTable.addEvent();

トラックバックURI

http://www.yomotsu.net/lab/javascripts/stripedtable/trackback

この記事へのコメントはまだありません

コメントフォーム

実験室に戻る

このページの目次