WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:IEで見出し固定で表をスクロールするには

0:[投稿] ロロ [2003/02/02 21:08 ][環境:WIN2000,IE Linux,apache2,tomcat]

お世話になります。

JavaWebシステムで、DBを検索して得られたレコードを表示
するテーブルを作成しているのですが、レコード数が多いと
画面全体がスクロールし、データを説明する見出し部分が見え
なくなってしまいます。

それで、見出し部分を固定してレコード部分のみスクロール
させたいのですが、JavaScriptやCSSで何か良い方法があれば
教えてください。

ブラウザは、IE専用です。また、レコードのデータが複雑な
ため、見出し部分とレコード部分を別のテーブルにすると、
位置合わせができないので、同一テーブルにしないといけません。

よろしくお願いします。


1:[回答] マ仁 [2003/02/03 14:09 ]

>レコード数が多いと画面全体がスクロールし、データを説明する見出し部分が見えなくなってしまいます。

この相談室の記事一覧みたいに一定のレコード数ごとに別テーブル化したり、見出しを挟むのはダメですか?


>レコードのデータが複雑なため、見出し部分とレコード部分を別のテーブルにすると、位置合わせができないので、同一テーブルにしないといけません。

これはCSSで頑張るとか、ちょっと汚いけど、セルの中身を<input type="text" value="中身">とか、<textarea>中身</textarea>にすれば固定化もできそうですが。

たぶん、求めているものとはイメージがかけ離れているとは思いますが、テーブルを部分表示するjavascriptを組んでみました。
もうちょっと頑張れば「↑」、「↓」ボタン押しっぱなしとかマウスのスクロールボタンに対応とかもできるのでしょうが苦手だし、使い物になるかわからんのでパス。

サンプルなのにソース長くてすいません。

<html>
<head>
<script type="text/javascript">
<!--
var Tbody;
var Tr_s;
var Tr_e;
function Tscroll(S_value) {
    while(S_value) {
        if(S_value > 0) {
            if(Tbody.childNodes[Tr_e + 1]) {
                Tbody.childNodes[Tr_s++].style.display = 'none';
                Tbody.childNodes[++Tr_e].style.display = '';
            }
            S_value--;
        } else {
            if(Tbody.childNodes[Tr_s - 1]) {
                Tbody.childNodes[--Tr_s].style.display = '';
                Tbody.childNodes[Tr_e--].style.display = 'none';
            }
            S_value++;
        }
    }
}
function Tscroll_init(Tid,Vrange) {
    Obj = document.getElementById(Tid);
    for(i=0;Obj.childNodes[i];i++) {
        if(Obj.childNodes[i].tagName == 'TBODY') {
            Tbody = Obj.childNodes[i];
            Tr_s = 0;
            Tr_e = Vrange - 1;
            for(j=Vrange;Tbody.childNodes[j];j++) {
                Tbody.childNodes[j].style.display = 'none';
            }
        }
    }
}
// -->
</script>
<title>TABLE TEST</title>
</head>
<body onload="Tscroll_init('T1',3)">

<table id="T1">
<caption>
    テスト用テーブル
    <input type="button" value="↑" onclick="Tscroll(-1)">
    <input type="button" value="↓" onclick="Tscroll(+1)">
</caption>
<thead>
 <tr><th>No</th><th>A</th><th>B</th></tr>
</thead>
<tbody>
 <tr><td>1</td><td>aaaaaaaaaaaa</td><td>あああああああ</td></tr>
 <tr><td>2</td><td>bbbbbbbbb</td><td>いいいいいい</td></tr>
 <tr><td>3</td><td>ccccccccccccccc</td><td>ううううう</td>  </tr>
 <tr><td>4</td><td>dddddddddddd</td><td>えええ</td></tr>
 <tr><td>5</td><td>eeeeeee</td><td>おおお</td></tr>
 <tr><td>6</td><td>ffffffffffffff</td><td>かかかかかかか</td></tr>
</tbody>
</table>

</body>
</html>


2:[回答] gun [2003/02/04 01:16 ]

>ブラウザは、IE専用です。また、レコードのデータが複雑な
>ため、見出し部分とレコード部分を別のテーブルにすると、
>位置合わせができないので、同一テーブルにしないといけません。
>よろしくお願いします。

"複雑"というのがどういうことかよく判りませんが、
私は下記のようにしてテーブルを分けて見出しが非スク
ロールになるようにしています。

    [見出し部]
    (a). [a-zA-Z0-9#$%&]等のブラウザ表示時のフォント幅を
     実測し、単語幅を算出する関数を作成
     (データに日本語が含まれる場合にはアウトですが・・)
    (b). 検索して得たデータを(a)の関数に引き渡して、
     最大幅のデータを算出
    (c). 見出しの次の<tr>に(b)で算出したデータを書き出す

    [データ部]
    (A). 全データを書き出した後の<tr>に見出しを書き出し、
     その<tr>のスタイルにはvisibility:hiddenを指定。

    [フレーム]
    (1).見出し部の(c)が見えない高さのframesetに設定する。


3:[回答] ロロ [2003/02/04 12:12 ]

マ仁さん
 サンプルコードを掲示してくださりありがとうございました。
JavaScriptは、全然素人のためそれぞれのメソッドやプロパティが
何を意味するのか良くわからないところがあるので、コードを良く読んで参考にさせていただきます。
 おそらく、「データ部分の行の先頭行を非表示にすると同時に末尾行を表示させる」という処理を繰り返すという理解でよろしいでしょうか。
 サンプルを実行してみましたが、これがスクロールに対応すると、確かにいいのができそうですね。

gunさんもありがとうございました。
 私も最初は見出し表示用フレームとデータ表示用フレームとに
分けていたのですが、これだとそれぞれのフレーム用に同じデー
タの別ページを用意する必要があったので、なんとかならないか
なと思っていたところだったのです。

のフレームに


4:[回答] gun [2003/02/04 13:43 ]

では、同一ページ内に
    1.見出し用テーブル(<table>)
    2.データ用テーブル
の2つを配置し、見出し用テーブルをJスクリプトで
スクロールに合わせて動かしてはどうでしょう?

------------------------------------------------------
<style>
body {
    margin: 0;
}
</style>

<script language="JScript">
function MoveCaption () {
    // 30は最大幅データが画面外になるように調整
    document.all('Caption').style.top = document.body.scrollTop - 30;
}
</script>
</head>
<body onScroll="MoveCaption();" onResize="MoveCaption();">
<!-- 見出し用テーブル -->
<table border=1 id="Caption" style="position:absolute;">
<tr><td>最大幅データ</td><td>最大幅データ</td><td>最大幅データ</td></tr>
<tr bgcolor="pink"><th>capt1</th><th>capt2</th><th>capt3</th></tr>
</table>
<!-- データ用テーブル -->
<table border=1>
<tr bgcolor="pink"><th>capt1</th><th>capt2</th><th>capt3</th></tr>

<<略>>

</table>
------------------------------------------------------


5:[回答] ween [2003/02/05 12:49 ]

table-layout:fixed を使えばだいぶそれっぽくなりそうな。
(Win2000+IE6 で確認)

<script>
var c1, c2, N, w;
onload = function () {
 c1=T1.rows[0].cells, c2=T2.rows[0].cells, N=c1.length;
 w=D1.offsetWidth-D1.scrollWidth;
 setTable();
}
function setTable () {
 for (var i=N,a=new Array;i--;) a[i] = c2[i].offsetWidth;
 T1.style.tableLayout = T2.style.tableLayout = 'fixed';
 for (var i=N;i--;) c1[i].width = c2[i].width = a[i];
 T2.rows[0].style.display = 'none';
 c1[N-1].width = a[N-1] + w;
 D1.style.width = T2.offsetWidth + w;
}
onresize = function () {
 T2.rows[0].style.display = '';
 for (var i=N;i--;) c2[i].width = '';
 D1.style.width = T2.style.tableLayout = 'auto'
 setTable();
}
</script>

<table id="T1"><!-- 見出し用テーブル -->
 <tr><th>No</th><th>----</th><th>○○○○</th><th>□□□□</th></tr>
</table>
<!-- スクロールの高さはこの div に設定 -->
<div id="D1" style="overflow-y:scroll; height:10em;">
 <table id="T2">
   <!-- この見出しはサイズ調整後に隠す -->
   <tr><th>No</th><th>----</th><th>○○○○</th><th>□□□□</th></tr>
   <!-- 実際のデータ行 -->
   <tr><td>1</td><td>aaa</td><td>ああ</td><td>アアアアアアアアアアア</td></tr>
   <tr><td>2</td><td>bbb bb bb b</td><td>いいいいいいい</td><td>イイ</td></tr>
   <!-- 以下データ行 -->
 </table>
</div>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World