テーブルのスクロール一つをとっても
ユーザビリティの向上には欠かせません。
ここに一つの例として、JavaScriptでスクロールを制御する
方法をご紹介します。
＜例＞
以下のようなテーブルを作成し、
| 見出し1 | 見出し3 |
| 見出し2 | 明細 |
・Y方向にスクロール
→「見出し2」と「明細」がスクロール
（「見出し1」と「見出し3」は固定）
・X方向にスクロール
→「見出し3」と「明細」がスクロール
（「見出し1」と「見出し2」は固定）
と、スクロールを設定する場合。
まずは<head>タグ内に
| <script language="JavaScript"> <!--// function Scroll1() { y = document.all('divMeisai').scrollTop; x = document.all('divMeisai').scrollLeft; newXY(x,y); } function Scroll2() { function newXY(x,y) { function newXY2(x,y) { |
と記述します。
そしてテーブル側は、
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td vAlign="top">
<!-- 見出し1 -->
<div id="divMidashi1" style="overflow: hidden;">
<table cellspacing="0" cellpadding="2">
<tr>
<th>見出し1</th>
</tr>
</table>
</div>
<!-- 見出し2 Repeater使用 -->
<div id="divMidashi2" style="overflow: hidden;"
onscroll="Scroll2();">
<table cellspacing="0" cellpadding="0">
<asp:repeater id="RepeatMidashi2" runat="server">
<ItemTemplate>
<tr id="tr1" runat="server">
<td>
<asp:label id="Midashi2" runat="server"></asp:label>
</td>
</tr>
</ItemTemplate>
</asp:repeater>
</table>
</div>
</td>
<td vAlign="top">
<!-- 見出し3 DataList使用 -->
<div id="divMidashi3" style="overflow: hidden; width: 540px">
<table cellspacing="0" cellpadding="0">
<tr>
<th>
<asp:DataList id="DataListMidashi3" runat="server"
cellspacing="0" cellpadding="0" gridlines="none"
repeatdirection="true">
<ItemTemplate>
<asp:label id="Midashi3" runat="server"
text='<%# DataBinder.Eval(Container.DataItem, "header03") %>'></asp:label>
</ItemTemplate>
</th>
</tr>
</table>
</div>
<!-- 見出し4 DataGrid使用-->
<div id="divMidashi4" style="overflow: scroll; onscroll="Scroll1();"
width="550px" height="350px" runat="server">
<table cellspacing="0" cellpadding="0">
<tr>
<asp:datagrid id="datagridMidashi4" runat="server"
cellspacing="0" cellpadding="0" gridlines="none"
autogeneratedcolumns="true">
</asp:datagrid>
</tr>
</table>
</div>
</td>
</tr>
</table>
