「JavaScript 行列を固定したテーブル」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==JavaScript 行列を固定したテーブル== [JavaScript] {{amazon|4873114683}} jQueryが出てきてから、すごく楽になった。。。 ↓こんなこ…」) |
|||
| 1行目: | 1行目: | ||
==JavaScript 行列を固定したテーブル== | ==JavaScript 行列を固定したテーブル== | ||
| − | [JavaScript] | + | [[JavaScript]] |
{{amazon|4873114683}} | {{amazon|4873114683}} | ||
| 12行目: | 12行目: | ||
====画面のﾘサイズ対応==== | ====画面のﾘサイズ対応==== | ||
=====HTML===== | =====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> | |
： | ： | ||
| 60行目: | 60行目: | ||
// コンテナの高さが、指定マージンより大きければ、テーブル明細パネルの高さを変更する | // コンテナの高さが、指定マージンより大きければ、テーブル明細パネルの高さを変更する | ||
| − | if (containerHeight | + | if (containerHeight > verticalMargin) { |
itemPanel.style.height = containerHeight - verticalMargin; | itemPanel.style.height = containerHeight - verticalMargin; | ||
} | } | ||
| 66行目: | 66行目: | ||
var adjust = 16; // 調整(行が半分隠れている場合等正しく判定されないため) | var adjust = 16; // 調整(行が半分隠れている場合等正しく判定されないため) | ||
isVerticalScrollBar = (itemPanel.style.overflow == 'scroll') /* 常時表示 */ | isVerticalScrollBar = (itemPanel.style.overflow == 'scroll') /* 常時表示 */ | ||
| − | || ((totalOffsetHeight(itemPanel)+adjust) | + | || ((totalOffsetHeight(itemPanel)+adjust) >= itemPanel.offsetHeight) /* 子要素のほうが高い */ |
// コンテナの幅が、指定マージンより大きければ、 | // コンテナの幅が、指定マージンより大きければ、 | ||
// テーブルヘッダーパネルおよびテーブル明細パネルの幅を変更する | // テーブルヘッダーパネルおよびテーブル明細パネルの幅を変更する | ||
| − | if (containerWidth | + | if (containerWidth > horizontalMargin) { |
itemPanel.style.width = containerWidth - horizontalMargin; | itemPanel.style.width = containerWidth - horizontalMargin; | ||
| 82行目: | 82行目: | ||
var headerMargin = (horizontalMargin + scrollBarMargin); | var headerMargin = (horizontalMargin + scrollBarMargin); | ||
var headerWidth = containerWidth - headerMargin; | var headerWidth = containerWidth - headerMargin; | ||
| − | if (containerWidth | + | if (containerWidth <= headerMargin ) { |
headerWidth = 0; | headerWidth = 0; | ||
} | } | ||
| 103行目: | 103行目: | ||
} | } | ||
| − | for (var i=0; i | + | for (var i=0; i<children.length; i++) { |
h += children[i].offsetHeight; | h += children[i].offsetHeight; | ||
} | } | ||
2020年2月15日 (土) 08:03時点における版
目次
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
© 2006 矢木浩人
