| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

JavaScript 行列を固定したテーブル

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

JavaScript 行列を固定したテーブル

JavaScript |

4873114683.09.MZZZZZZZ.jpg link

jQueryが出てきてから、すごく楽になった。。。 ↓こんなことしなくても、jQueryプラグイン使えばよい。

インラインフレーム等を使わずに、行列を固定したテーブルを実現

0708 scrl tbl.jpg テンプレート:Ref scroll table sample.lzh

画面のﾘサイズ対応

HTML
  1. <body onresize="resizePanel();" ･･･
  2.   <div id="HEADER_PANEL" style="overflow:hidden;">
  3.     <table styel="table-layout:fixed;" ･･･
  4.   </div>
  5.   <div id="ITEM_PANEL" style="overflow:hidden;">
  6.     <table style="overflow:auto;" ･･･
  7.   </div>
  8.           ：
JavaSctript
  1. /**
  2.  * 画面のサイズ変更から呼び出す
  3.  */
  4. function resizePanel() {
  5.  resizeTablePanel(
  6.            80 
  7.          , 30
  8.          ,document.getElementById("HEADER_PANEL") 
  9.          ,document.getElementById("ITEM_PANEL")
  10.  );
  11. }
  12.  
  13. /**
  14. /* @param Description      : 画面のサイズに合わせて、サイズを変更するテーブル
  15. /* @param Arguments        : 
  16. /* @param verticalMargin   : 垂直マージン
  17. /* @param horizontalMargin : 水平マージン
  18. /* @param headerPanel      : テーブルヘッダーパネル(DIV)
  19. /* @param itemPanel        : テーブルアイテムパネル(DIV)
  20. /* @param containerHeight  : 基準となるコンテナの高さ(省略時、BODYタグのクライアント領域高さ)
  21. /* @param containerWidth   : 基準となるコンテナの幅(省略時、BODYタグのクライアント領域幅)
  22.  */
  23. function resizeTablePanel( verticalMargin, horizontalMargin, headerPanel, itemPanel 
  24.                          , containerHeight /* document.body.clientHegith */ 
  25.                          , containerWidth  /* document.body.clientWidth  */ ) {
  26.     // 規定値の設定
  27.     if (containerHeight == undefined) containerHeight = document.body.clientHeight; // コンテナ高さ 
  28.     if (containerWidth  == undefined) containerWidth  = document.body.clientWidth;  // コンテナ幅
  29.                          
  30.     var SCROLL_BAR_MARGIN     = 17;       // スクロールバー幅 規定値
  31.     var isVerticalScrollBar   = false;    // 垂直スクロールバーが表示されるか
  32.     var scrollBarMargin       = 0;        // 垂直スクロールバーマージン
  33.  
  34.     // テーブル幅が変わらない設定(overflow-y:auto or overflow-y:scroll)
  35.     var isFixWidth   = itemPanel.style.overflowY == 'scroll'
  36.                     || itemPanel.style.overflowY == 'auto';
  37.     
  38.     // コンテナの高さが、指定マージンより大きければ、テーブル明細パネルの高さを変更する
  39.     if (containerHeight > verticalMargin) {
  40.         itemPanel.style.height = containerHeight - verticalMargin;
  41.     }
  42.     // 垂直スクロールバーが表示されるかを判定する
  43.     var adjust = 16; // 調整(行が半分隠れている場合等正しく判定されないため)
  44.     isVerticalScrollBar = (itemPanel.style.overflow == 'scroll')                             /* 常時表示           */
  45.                        || ((totalOffsetHeight(itemPanel)+adjust) >= itemPanel.offsetHeight)  /* 子要素のほうが高い */
  46.  
  47.     // コンテナの幅が、指定マージンより大きければ、
  48.     // テーブルヘッダーパネルおよびテーブル明細パネルの幅を変更する
  49.     if (containerWidth > horizontalMargin) {
  50.         itemPanel.style.width    = containerWidth - horizontalMargin;
  51.         
  52.         // 垂直スクロールバー有無により、ヘッダーの幅を調整
  53.         if (isVerticalScrollBar) {
  54.             scrollBarMargin = SCROLL_BAR_MARGIN;
  55.         }
  56.  
  57.         // テーブル幅固定の場合、ヘッダーリサイズしない
  58.         if (!isFixWidth) {
  59.             var headerMargin = (horizontalMargin + scrollBarMargin);
  60.             var headerWidth  = containerWidth - headerMargin;
  61.             if (containerWidth <= headerMargin ) {
  62.                 headerWidth = 0;
  63.             }
  64.             headerPanel.style.width  = headerWidth
  65.         }
  66.     }
  67.     return;
  68. }
  69.  
  70. /**
  71. /* @param Description : 指定されたオブジェクトの直接の子どもの高さの合計を取得
  72. /* @param Arguments   : 
  73. /* @param parent      : 対象となる親オブジェクト
  74.  */
  75. function totalOffsetHeight( parent ) {
  76.     var children = parent.children;
  77.     var h = 0;
  78.     if (children == null) {
  79.         return h;
  80.     }
  81.     
  82.     for (var i=0; i<children.length; i++) {
  83.       h += children[i].offsetHeight;
  84.     }
  85.     return h;
  86. }

テンプレート:Ref scrl tbl.jpg テンプレート:Ref scroll table sample.lzh テンプレート:Attach

{{include_html banner_html, "!Javascript"}}

「https://www.typea.info/tips_/index.php?title=JavaScript_行列を固定したテーブル&oldid=6237」から取得

© 2006 矢木浩人