2012年12月19日

Javascriptでヘッダ固定、データ行を スクロールさせるテーブル

スポンサード リンク

 DOMで Div要素,Table要素を操作 スクロールテーブル。
HTML DOM Table rows,cellsコレクション Obj.style.position='absolute';

No 都道府県 県庁所在地 人口 面積(ku) 県の鳥
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>面積(ku)</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='**'>
など。
スタイルシートは表の装飾のみに使っています。
上記サンプルソース 参考ページ
posted by javaScript at 20:45 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする

2012年12月09日

ボックスが横方向に伸縮 JavaScript

スポンサード リンク

widthプロパティ の値をjavascriptで変更
Element.style.width='値';

テント

 さて使い道は......................................
画像が入れ替わるようにすれば、スライドショーができるかも??今度挑戦!!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>ボックスが横方向に伸縮 JavaScript </title>
  <style type="text/css">
    #Pid {
      overflow: hidden; /* 内容がボックスからはみ出た部分は非表示 */
      background-color: #fafad2;/* 背景色 */
      width: 310px; /* ボックスの横幅 */
         }
</style>
<script type="text/javascript">
  var boxW=0; //ボックスの横幅変数
  var increaseW=0; //ボックスの横幅増減変数
  var flag = false;
function toggle(){// トグルスイッチ
flag = !flag; // trueとfalseの切り替え ! 否定演算子
 if(flag == true){ Loop();} //条件を満たした場合の処理
  else{ Stop(); } //条件を満たしていない場合の処理
    }
function Loop(){
if (boxW<=0) { increaseW=5; }
 else if (boxW>=500) { increaseW=-5; }
  boxW=boxW+increaseW;
var Pbox=document.getElementById("Pid");// Pidへの参照を変数に代入
     Pbox.style.width=boxW+"px";
      Timer=setTimeout('Loop()',30);
       }
function Stop(){
clearTimeout(Timer);
  }
</script>
</head>
<body>
 <p>
  <button type="button" onclick="toggle()">Start / Stop</button>
 </p>
   <p id="Pid">
<img src="**/image/tento.gif" alt="" width="300" height="170" />
   </p>
</body>
</html>
width プロパティ
 要素の生成するボックスの横幅を指定します。
このサンプルは、ID名が"Pid"である<p>要素のボックスの横幅を
JavaScriptで指定し伸縮を実現しています。
 var Pbox=document.getElementById("Pid");
   Pbox.style.width=boxW+"px";
 // P要素に width値 を指定。
setTimeout メソッド
 タイマーID=setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に
指定した処理を行います。 func には処理する関数名を記述します。
clearTimeoutメソッド
 setTimeout メソッドの処理を停止するメソッド。
clearTimeout()のパラメータにタイマーIDを指定します。
  clearTimeout(タイマーID);

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
heteml
overflow プロパティ
setTimeoutメソッド , clearTimeoutメソッド
background 背景に関するプロパティ 一覧
paddingプロパティ ボックスの内側の余白
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐

posted by javaScript at 17:50 | 大阪 ☔ | ボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。