DOMで Div要素,Table要素を操作 スクロールテーブル。
HTML DOM Table rows,cellsコレクション Obj.style.position='absolute';
| No | 都道府県 | 県庁所在地 | 人口 | 面積（ｋ㎡) | 県の鳥 |
|---|---|---|---|---|---|
| 01 | 北海道 | 札幌市 | 5,517,449 | 78,420.61 | タンチョウ |
| 02 | 青森県 | 青森市 | 1,382,637 | 9,644.21 | 白鳥 |
| 03 | 岩手県 | 盛岡市 | 1,340,852 | 15,278.89 | キジ |
| 04 | 宮城県 | 仙台市 | 2,340,029 | 7,285.75 | ガン |
| 05 | 秋田県 | 秋田市 | 1,097,626 | 11,636.25 | やまどり |
| 06 | 山形県 | 山形市 | 1,179,964 | 9,323.46 | オシドリ |
| 07 | 福島県 | 福島市 | 2,042,816 | 13,782.75 | キビタキ |
| 08 | 茨城県 | 水戸市 | 2,967,404 | 6,095.69 | ヒバリ |
| 09 | 栃木県 | 宇都宮市 | 2,010,732 | 6,408.28 | オオルリ |
| 10 | 群馬県 | 前橋市 | 2,006,903 | 6,363.16 | やまどり |
チカッパプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Javascriptでヘッダ固定、データ行を スクロールさせるテーブル</title>
<style>
<!--
#sclTbl{
font-size : 15px; /*文字サイズ*/
}
#sclTbl,#sclTbl thead tr{
background-color : #fff; /* 表背景色,セル隙間の色 */
}
#sclTbl th{ /* 見出しセル */
color : white; /* 文字色 */
background-color : #4e80de; /* 背景色 */
}
#sclTbl td{ /* データセル */
color : #000;
}
#sclTbl th,#sclTbl td{
padding : 4px; /* セル内余白 */
}
#outDiv{
border:1px solid #000; /* 外枠ボーダー */
}
-->
</style>
<script language="JavaScript">
<!--
window.onload = hoge;
function hoge() {
var Lines=5; // スクロール領域に表示する行数
var Zbra = ''; // 行塗り別け変数
var Even='#f9edbe'; // 偶数行
var Odd='#e1fff0'; // 奇数行
var Tgt=document.getElementById('sclTbl'); // table 要素への参照を代入
Tgt.style.borderCollapse='separate'; // 分離ボーダー
Tgt.style.borderSpacing='2px'; // ボーダーの間隔(セル隙間)
var ThdHeight = Tgt.tHead.offsetHeight; // 'thead'の高さ
var RowHeight=Tgt.rows[0].offsetHeight; //データ行の高さ
var TbyHeight = Tgt.tBodies[0].offsetHeight; // 'tbody'の高さ
/* セルの横幅、取得 設定 */
for (var j=0; j<Tgt.rows[0].cells.length; j++) { // ヘッダ行 セル位置取得
var cellWidth = Tgt.rows[0].cells[j].offsetWidth; // j番目列のセルの幅,取得
Tgt.rows[0].cells[j].width = cellWidth +'px'; // 見出しセル幅,設定
Tgt.rows[1].cells[j].width = cellWidth +'px'; // データセル幅,設定
}
var ThdWidth=Tgt.tHead.offsetWidth+2; //表の幅
/* 行取得 */
for (var i=0; i<Tgt.rows.length; i++) {
var Rows=Tgt.rows[i].style; //行のスタイル
if(i==0){ // ヘッダ行
Rows.position = 'absolute';//絶対位置
Rows.left = '0px';
Rows.top = '0px';
}
/* データー行 tr 1行ごとの背景色を塗り分け */
if(i>0){ Zbra = (Zbra == Odd) ? Even : Odd;
Rows.backgroundColor = Zbra;
}
}
/* テーブルを囲む外側の 'div'要素 生成 */
var outD=document.createElement('div');
outD.id='outDiv';// ID名をつける
outD.style.position='relative'; // 相対位置
outD.style.paddingTop=ThdHeight+'px'; // 外枠の上余白
outD.style.width=(ThdWidth+18)+'px'; // 表の幅＋スクロールバーの幅
var Tgtparent=Tgt.parentNode; // 親ノード
Tgtparent.insertBefore(outD,Tgt); // outDをテーブルの外側に挿入
/* テーブルを入れる内側の 'div'要素 生成 */
var inD=document.createElement('div');
inD.style.height =(RowHeight*Lines)+(Lines*2)+'px'; // 内枠の高さ,表示行数
inD.style.overflow = 'auto'; // スクロールバー表示
inD.appendChild(Tgt); // テーブル 'sclTbl'を inD の中に入れる
d=document.getElementById('outDiv');
d.appendChild(inD); // 'inD' を 'outD' の内側に入れる
}
//-->
</script>
</head>
<body>
<table id='sclTbl'>
<thead>
<tr>
<th>No</th><th>都道府県</th><th>県庁所在地</th>
<th>人口</th><th>面積（ｋ㎡)</th><th>県の鳥</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td><td>北海道</td><td>札幌市</td>
<td>5,517,449</td><td>78,420.61</td><td>タンチョウ</td>
</tr>
<tr>
<td>02</td><td>青森県</td><td>青森市</td>
<td>1,382,637</td><td>9,644.21</td><td>白鳥</td>
</tr>
<tr>
<td>03</td><td>岩手県</td><td>盛岡市</td>
<td>1,340,852</td><td>15,278.89</td><td>キジ</td>
</tr>
<tr>
<td>04</td><td>宮城県</td><td>仙台市</td>
<td>2,340,029</td><td>7,285.75</td><td>ガン</td>
</tr>
<tr>
<td>05</td><td>秋田県</td><td>秋田市</td>
<td>1,097,626</td><td>11,636.25</td><td>やまどり</td>
</tr>
<tr>
<td>06</td><td>山形県</td><td>山形市</td>
<td>1,179,964</td><td>9,323.46</td><td>オシドリ</td>
</tr>
<tr>
<td>07</td><td>福島県</td><td>福島市</td>
<td>2,042,816</td><td>13,782.75</td><td>キビタキ</td>
</tr>
<tr>
<td>08</td><td>茨城県</td><td>水戸市</td>
<td>2,967,404</td><td>6,095.69</td><td>ヒバリ</td>
</tr>
<tr>
<td>09</td><td>栃木県</td><td>宇都宮市</td>
<td>2,010,732</td><td>6,408.28</td><td>オオルリ</td>
</tr>
<tr>
<td>10</td><td>群馬県</td><td>前橋市</td>
<td>2,006,903</td><td>6,363.16</td><td>やまどり</td>
</tr>
</tbody>
</table>
</body>
</html>
JavaScriptで見出し（ヘッダ）固定のテーブル
ヘッダ固定と見出しセル、データセルの横幅取得、設定をスクリプトで行っています。以前CSS でヘッダ固定、データ行を スクロールさせるテーブルを書きましたが
これでは
table要素を二つのdiv要素で囲みcssで列幅を指定する作業が必要でしたがこれらを行うことなく見出し固定スクロールを実現しています。
既存のテーブルにID名
<table id='sclTbl'>を付けるだけです。但し、属性値やスタイルの指定は外してください。
<table cellspacing='2' cellpadding='10' border='1'>
<td height='30' style='**'>など。スタイルシートは表の装飾のみに使っています。
