JavaScript 行列を固定したテーブル
ナビゲーションに移動
検索に移動
目次
JavaScript 行列を固定したテーブル
jQueryが出てきてから、すごく楽になった。。。 ↓こんなことしなくても、jQueryプラグイン使えばよい。
インラインフレーム等を使わずに、行列を固定したテーブルを実現
テンプレート:Ref scroll table sample.lzh
画面のﾘサイズ対応
HTML
<body onresize="resizePanel();" ･･･ <div id="HEADER_PANEL" style="overflow:hidden;"> <table styel="table-layout:fixed;" ･･･ </div> <div id="ITEM_PANEL" style="overflow:hidden;"> <table style="overflow:auto;" ･･･ </div> ：
JavaSctript
/**
* 画面のサイズ変更から呼び出す
*/
function resizePanel() {
resizeTablePanel(
80
, 30
,document.getElementById("HEADER_PANEL")
,document.getElementById("ITEM_PANEL")
);
}
/**
/* @param Description : 画面のサイズに合わせて、サイズを変更するテーブル
/* @param Arguments :
/* @param verticalMargin : 垂直マージン
/* @param horizontalMargin : 水平マージン
/* @param headerPanel : テーブルヘッダーパネル(DIV)
/* @param itemPanel : テーブルアイテムパネル(DIV)
/* @param containerHeight : 基準となるコンテナの高さ(省略時、BODYタグのクライアント領域高さ)
/* @param containerWidth : 基準となるコンテナの幅(省略時、BODYタグのクライアント領域幅)
*/
function resizeTablePanel( verticalMargin, horizontalMargin, headerPanel, itemPanel
, containerHeight /* document.body.clientHegith */
, containerWidth /* document.body.clientWidth */ ) {
// 規定値の設定
if (containerHeight == undefined) containerHeight = document.body.clientHeight; // コンテナ高さ
if (containerWidth == undefined) containerWidth = document.body.clientWidth; // コンテナ幅
var SCROLL_BAR_MARGIN = 17; // スクロールバー幅 規定値
var isVerticalScrollBar = false; // 垂直スクロールバーが表示されるか
var scrollBarMargin = 0; // 垂直スクロールバーマージン
// テーブル幅が変わらない設定(overflow-y:auto or overflow-y:scroll)
var isFixWidth = itemPanel.style.overflowY == 'scroll'
|| itemPanel.style.overflowY == 'auto';
// コンテナの高さが、指定マージンより大きければ、テーブル明細パネルの高さを変更する
if (containerHeight > verticalMargin) {
itemPanel.style.height = containerHeight - verticalMargin;
}
// 垂直スクロールバーが表示されるかを判定する
var adjust = 16; // 調整(行が半分隠れている場合等正しく判定されないため)
isVerticalScrollBar = (itemPanel.style.overflow == 'scroll') /* 常時表示 */
|| ((totalOffsetHeight(itemPanel)+adjust) >= itemPanel.offsetHeight) /* 子要素のほうが高い */
// コンテナの幅が、指定マージンより大きければ、
// テーブルヘッダーパネルおよびテーブル明細パネルの幅を変更する
if (containerWidth > horizontalMargin) {
itemPanel.style.width = containerWidth - horizontalMargin;
// 垂直スクロールバー有無により、ヘッダーの幅を調整
if (isVerticalScrollBar) {
scrollBarMargin = SCROLL_BAR_MARGIN;
}
// テーブル幅固定の場合、ヘッダーリサイズしない
if (!isFixWidth) {
var headerMargin = (horizontalMargin + scrollBarMargin);
var headerWidth = containerWidth - headerMargin;
if (containerWidth <= headerMargin ) {
headerWidth = 0;
}
headerPanel.style.width = headerWidth
}
}
return;
}
/**
/* @param Description : 指定されたオブジェクトの直接の子どもの高さの合計を取得
/* @param Arguments :
/* @param parent : 対象となる親オブジェクト
*/
function totalOffsetHeight( parent ) {
var children = parent.children;
var h = 0;
if (children == null) {
return h;
}
for (var i=0; i<children.length; i++) {
h += children[i].offsetHeight;
}
return h;
}
テンプレート:Ref scrl tbl.jpg テンプレート:Ref scroll table sample.lzh テンプレート:Attach
{{include_html banner_html, "!Javascript"}}
© 2006 矢木浩人
