TsutomuUchimaの日記

■[JavaScript] テーブルのヘッダを固定してエクセル風に表示する Super Tables

大量のデータを使用するテーブルをHTMLで書くと画面をスクロールする事になりますが、その際にヘッダも一緒にスクロールされてしまい現在見ている項目が何なのか確認する事が出来ない時があります。

そんな時は Super Tables を使えばエクセルのようにヘッダを固定して表示する事が出来ます。縦横のヘッダを同時に固定させる事も可能です。サンプルを作ってみました。ついでにデータ入力可能にしてみました。

エクセル風入力可能なテーブル

http://www.geocities.jp/uchblog/supertables/mySuperTablesDemo01.html

ソースは以下のような感じで。

<div class="fakeContainer">
<table id="demoTable" class="demoTable">
<tr>
<th>Account</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>State</th>
<th>Email Address</th>
<th>Favorite Color</th>
<th>Favorite Season</th>
</tr>
<tr>
<td>account0001</td>
<td>Jim</td>
<td>Bo</td>
<td>25</td>
<td>Delaware</td>
<td>Jim.Bo@gmail.com</td>
<td>Blue</td>
<td>Winter</td>
</tr>
〜
</table>
</div>

<div id="testDiv" style="position:absolute;top:0px;right:0px;display:block;border:1px solid #adadad;width:300px;height:80px;padding:8px;background-color:#f6f6f6;"></div>

<script type="text/javascript" src="javascripts/superTables.js"></script>
<script type="text/javascript">
//<![CDATA[

(function() {
	var mySt = new superTable("demoTable", {
		cssSkin : "sSky",
		fixedCols : 1,
		headerRows : 1,
		onStart : function () {
			this.start = new Date();
		},
		onFinish : function () {
			document.getElementById("testDiv").innerHTML += "Finished...<br>" + ((new Date()) - this.start) + "ms.<br>";
		}
	});
})();

//]]>
</script>

通常のテーブルを書いてsuperTables.jsを読み込み数行の初期設定を書けばOK。テーブルを書くのに特別な事をしなくて良いのが嬉しいですね。

私は自作のTeedaアプリでこのスクリプトを使用しています。本当に便利！

Super Tables - HTML Tables with Fixed Headers and More - Matt's 411 - Javascript, CSS, HTML and more

http://www.matts411.com/post/super_tables/