プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

Super_Tables

概要

表を出力時に行と列を固定してスクロールすることができる

ダウンロード

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

デモ

サンプル


javascript記述

<script type="text/javascript" src="javascripts/superTables.js"></script>
<script type="text/javascript">
 
(function() {
	var mySt = new superTable("demoTable", {
		/* デザインのスキンを設定 */
		cssSkin : "sSky",	
		/* 固定列 */
		fixedCols : 1,
		/* 固定業 */
		headerRows : 1,
 
		/* 列のサイズ */
		colWidths : [-1, 100, -1]
 
		/* 処理開始 */
		onStart : function () {
			this.start = new Date();
		},
		/* 処理完了 */
		onFinish : function () {
			document.getElementById("testDiv").innerHTML += "Finished...<br>" + ((new Date()) - this.start) + "ms.<br>";
		}
	});
})();
 
</script>
 
 

ソース

ダウンロードして以下のソースを使用してみた

<!DOCTYPE html>
<html>
	<head>
		<title>Super Tables Demo</title>
		<link href="stylesheets/superTables.css" rel="Stylesheet" type="text/css" />
	</head>
	<body>
		<style>
		body {
			background-color: #ffffff;
		    font-family: Tahoma, Arial, sans serif;
		}
		.fakeContainer { /* The parent container */
		    margin: 20px;
		    padding: 0px;
		    border: none;
		    width: 640px; /* Required to set */
		    height: 320px; /* Required to set */
		    overflow: hidden; /* Required to set */
		}
		</style>
	<body>
		<h1 style="margin:0px 0px 2px 0px;">Super Tables v0.30 Demo</h1>
		<a style="font-size:small;font-weight:normal" href="http://www.matts411.com/main/super_tables">Return to Matts411.com</a>
 
		<div class="fakeContainer">
			<table id="demoTable" class="demoTable">
				<tr>
					<th>col1</th>
					<th>col2</th>
					<th>col3</th>
					<th>col4</th>
					<th>col5</th>
				</tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td></tr>
				<tr><td>111</td><td>111-a</td><td>111-b</td><td>111-c</td><td>111-ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</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>
 
</body>
</html>
 
 

「ライブラリ-Super_Tables」をウィキ内検索
最終更新：2013年05月23日 19:36