请问如何让表格部分滚动,在线等

Question

<div style="height:100px;overflow-y:auto;">
<table width="75%" border="1" cellspacing="0" cellpadding="0" id="aa">
  <tr> 
    <th width="33%">姓名</th>
    <th width="33%">数学</th>
    <th width="33%">英语</th>
  </tr>
  <tr align="center"> 
    <td>Jack</td>
    <td>34</td>
    <td>54</td>
  </tr>
  <tr align="center"> 
    <td>Tom</td>
    <td>78</td>
    <td>65</td>
  </tr>
  <tr align="center"> 
    <td>Mary</td>
    <td>54</td>
    <td>76</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr><tr align="center"> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>
</div>
--------------------------------------
就是说,这样可以实现滚动,但表头部分(第一行)也跟着滚动了.希望表格的第一行不动,下面的滚动.

Answer 1

这个办法确实可行...,以前也正是这么做的.
但第一行里每列有很多onclick事件(就是排序的事件),好像比较麻烦...
有没有比较直接的办法呢?

Answer 2

<html><head><title>DefineGrid</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<style type=text/css>
BODY{font-size:9pt;}
TD{font-size:9pt;}
.Header{border-right:#555 1px solid;padding-right:4px;border-top:#FFF 1px solid;padding-left: 4px;background:#CCC;padding-bottom:4px;overflow:hidden;border-left:#FFF 1px solid;cursor:hand;padding-top:4px;border-bottom:#555 1px solid;white-space:nowrap}
.Cell{border-right:#DDD 1px solid;padding-right:3px;border-top:#FFF 1px solid;padding-left:3px;background:#FFF;padding-bottom:3px;overflow:hidden;boder-left:#FFF 1px solid;padding-top:3px;border-bottom:#DDD 1px solid;white-space:nowrap}
</style><script>
//栏位标题(栏位名称#栏位宽度#资料对齐)
var Header=new Array();
for(iIndex=0;iIndex<10;iIndex++)
{
Header[iIndex]="字段"+iIndex+"#100#left";
}
//栏位资料(二维阵列)
var CellArray=new Array();
for(iIndex=0;iIndex<20;iIndex++)
{
var Cell=new Array();
for(kIndex=0;kIndex<10;kIndex++)
{
Cell[kIndex]="行:"+iIndex+"字段:"+kIndex+">值";
}
CellArray[iIndex]=Cell;
}
</script>
<script>
var GridWidth=480;//资料表显示宽度(不含卷轴)
var ShowLine=10;//资料表显示列数
var CellHeight=21;//资料列高度
var LockColumn=1;//要锁定的栏位数(由左至右)function WriteTable()
{
//写入表格
var iGridWidth=GridWidth;
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><div style=\"width:100%;overflow-x:scroll\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>";
for(iIndex=0;iIndex<Header.length;iIndex++)
{
if(iIndex<LockColumn)
{
var strHeader=Header[iIndex].split("#");
iGridWidth-=strHeader[1];
var LockInfo=((iIndex+1)==LockColumn)?"解除锁定":"锁定此栏位";
NewHTML+="<td><div class=\"Header\" style=\"width:"+strHeader[1]+"px;height:"+CellHeight+"px\" title=\""+LockInfo+"\" onclick=\"ResetTable("+iIndex+")\">"+strHeader[0]+"</div></td>";
}
}
NewHTML+="</tr><tr><td colspan=\""+LockColumn+"\"><div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\"><div id=\"DataGroup1\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div style=\"width:"+iGridWidth+"px;overflow-x:scroll\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>";
for(iIndex=0;iIndex<Header.length;iIndex++)
{
if(iIndex>=LockColumn)
{
var strHeader=Header[iIndex].split("#");
NewHTML+="<td><div class=\"Header\" style=\"width:"+strHeader[1]+"px;height:"+CellHeight+"px\" title=\"锁定此栏位\" onclick=\"ResetTable("+iIndex+")\">"+strHeader[0]+"</div></td>";
}
}
NewHTML+="</tr><tr><td colspan=\""+(Header.length-LockColumn)+"\"><div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\"><div id=\"DataGroup2\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\"><div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div></div></td></tr></table>";
DefineGrid.innerHTML=NewHTML;
ApplyData();
}function ApplyData()
{
//写入资料
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
for(iIndex=0;iIndex<CellArray.length;iIndex++)
{
NewHTML+="<tr>";
for(kIndex=0;kIndex<Header.length;kIndex++)
{
if(kIndex<LockColumn)
{
var strHeader=Header[kIndex].split("#");
NewHTML+="<td><div class=\"Cell\" style=\"width:"+strHeader[1]+"px;height:"+CellHeight+"px;text-align:"+strHeader[2]+"\">"+CellArray[iIndex][kIndex]+"</div></td>";
}
}
NewHTML+="</tr>";
}
NewHTML+="</table>";
DataGroup1.innerHTML=NewHTML;
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
for(iIndex=0;iIndex<CellArray.length;iIndex++)
{
NewHTML+="<tr>";
for(kIndex=0;kIndex<Header.length;kIndex++)
{
if(kIndex>=LockColumn)
{
var strHeader=Header[kIndex].split("#");
NewHTML+="<td><div class=\"Cell\" style=\"width:"+strHeader[1]+"px;height:"+CellHeight+"px;text-align:"+strHeader[2]+"\">"+CellArray[iIndex][kIndex]+"</div></td>";
}
}
NewHTML+="</tr>";
}
NewHTML+="</table>";
DataGroup2.innerHTML=NewHTML;
DataFrame1.style.pixelHeight=CellHeight*ShowLine;
DataFrame2.style.pixelHeight=CellHeight*ShowLine;
DataFrame3.style.pixelHeight=CellHeight*ShowLine+CellHeight;
DataGroup3.style.pixelHeight=CellHeight*(CellArray.length+1);
}function ResetTable(n)
{
var iGridWidth=0;
for(iIndex=0;iIndex<Header.length;iIndex++)
{
if(iIndex<(n+1))
{
var strHeader=Header[iIndex].split("#");
iGridWidth+=parseInt(strHeader[1]);
}
}
if(iGridWidth>GridWidth)
{
var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽\n\n度,这可能会造成版面显示不正常.\n\n\n您确定要继续吗?");
}
else
{
Sure=true;
}
if(Sure)
{
LockColumn=(LockColumn==n+1)?0:n+1;
WriteTable();
}
}function SYNC_Roll()
{
DataGroup1.style.posTop=-DataFrame3.scrollTop;
DataGroup2.style.posTop=-DataFrame3.scrollTop;
}
window.onload=WriteTable;
</script></head>
<body>
<center>
<table cellspacing=0 cellpadding=0 border=0>
  <tr>
    <td 
    style="border-right:white 2px inset;border-top:white 2px inset;border-left: white 2px inset; border-bottom:white 2px inset;background-color:scrollbar">
      <div id=DefineGrid></div>
    </td>
  </tr>
</table>
</center>

Answer 3

看看.
http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=314http://computer.mblogger.cn/awaysrain/posts/1680.aspx