tbody区域滚动条

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<p></p>
<title>锁定表格栏位范例网页</title>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<br>
<style type="text/<a" href="https://www.*1*1*1cn.net/cssdiv/css.html" target="_blank">css>BODY {<br />
    FONT: 12px 细明体; CURSOR: default<br />
}<br />
TD {<br />
    FONT: 12px 细明体; CURSOR: default<br />
}<br />
.title {<br />
    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<br />
}<br />
.cdata {<br />
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap<br />
}<br />
</style>
<p><script language="JavaScript"><br />
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 )<br />
var DataTitles=new Array(<br />
"歌手 / 团体#90 #left"  ,<br />
"专辑名称   #130#left"  ,<br />
"发行公司   #110#left"  ,<br />
"本周排名   #58 #center",<br />
"排名状况   #58 #center",<br />
"上周排名   #58 #center",<br />
"上榜周数   #58 #center",<br />
"最高名次   #58 #center",<br />
"销售百分比 #70 #center")</script></p>
<p>// 栏位资料 ( 二维阵列 )<br>
var DataFields=new Array()<br>
DataFields[0] =new Array("萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %")<br>
DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %")<br>
DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %")<br>
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %")<br>
DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")<br>
DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")<br>
DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %")<br>
DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %")<br>
DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %")<br>
DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %")<br>
DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")<br>
DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")<br>
DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %")<br>
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")<br>
DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")<br>
DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")</p>
<p></p>
<p><script language="JavaScript"><br />
var Box    // 资料表显示宽度 ( 不含卷轴 )<br />
var ShowLine = 10    // 资料表显示列数<br />
var Rs    // 资料列高度<br />
var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )</script></p>
<p>function WriteTable(){    // 写入表格<br>
var iBoxWidth=BoxWidth<br>
var NewHTML="</p>
<table border="0" cellpadding="0" cellspacing="0"><tr>
<br>
<td><div style="width:100%;overflow-x:scroll">
<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>"<br>
for(i=0;i<datatitles.length></datatitles.length>
  if(i<lockcols></lockcols>
    var cTitle=DataTitles[i].split("#")<br>
    iBoxWidth-=cTitle[1]<br>
    var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"<br>
    NewHTML+="<td><div class="title" style="width:" title="" onclick="ResetTable(">"+cTitle[0]+"</div></td>"<br>
  }<br>
}<br>
NewHTML+="</tr>
<br>
<tr><td colspan="">
<br>
<div id="DataFrame1" style="position:relative;width:100%;overflow:hidden">
<br>
<div id="DataGroup1" style="position:relative"></div>
</div>
<br>
</td></tr>
</table>
</div></td>
<br>
<td valign="top"><div style="width:">
<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>"<br>
for(i=0;i<datatitles.length></datatitles.length>
  if(i>=LockCols){<br>
    var cTitle=DataTitles[i].split("#")<br>
    NewHTML+="<td><div class="title" style="width:" title="锁定此栏位" onclick="ResetTable(">"+cTitle[0]+"</div></td>"<br>
  }<br>
}<br>
NewHTML+="</tr>
<br>
<tr><td colspan="">
<br>
<div id="DataFrame2" style="position:relative;width:100%;overflow:hidden">
<br>
<div id="DataGroup2" style="position:relative"></div>
<br>
</div>
</td></tr>
</table>
<br>
</div></td>
<td valign="top">
<br>
<div id="DataFrame3" style="position:relative;background:#000;overflow-y:scroll" onscroll="SYNC_Roll()">
<br>
<div id="DataGroup3" style="position:relative;visibility:hidden"></div>
<br>
</div>
</td>
</tr></table>"<br>
DataTable.innerHTML=NewHTML<br>
ApplyData()<br>
}
<p>function ApplyData(){    // 写入资料<br>
var NewHTML="</p>
<table border="0" cellpadding="0" cellspacing="0">"<br>
for(i=0;i<datafields.length></datafields.length>
  NewHTML+="<tr>"<br>
  for(j=0;j<datatitles.length></datatitles.length>
    if(j<lockcols></lockcols>
      var cTitle=DataTitles[j].split("#")<br>
      NewHTML+="<td><div class="cdata" style="width:">"+DataFields[i][j]+"</div></td>"<br>
    }<br>
  }<br>
  NewHTML+="</tr>"<br>
}<br>
NewHTML+="</table>"<br>
DataGroup1.innerHTML=NewHTML
<p><br>
var NewHTML="</p>
<table border="0" cellpadding="0" cellspacing="0">"<br>
for(i=0;i<datafields.length></datafields.length>
  NewHTML+="<tr>"<br>
  for(j=0;j<datatitles.length></datatitles.length>
    if(j>=LockCols){<br>
      var cTitle=DataTitles[j].split("#")<br>
      NewHTML+="<td><div class="cdata" style="width:">"+DataFields[i][j]+"</div></td>"<br>
    }<br>
  }<br>
  NewHTML+="</tr>"<br>
}<br>
NewHTML+="</table>"<br>
DataGroup2.innerHTML=NewHTML<br>
DataFrame1.style.pixelHeight=RsHeight*ShowLine<br>
DataFrame2.style.pixelHeight=RsHeight*ShowLine<br>
DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight<br>
DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)<br>
}
<p>function ResetTable(n){<br>
var iBox<br>
for(i=0;i<datatitles.length></datatitles.length>
  if(i
    var cTitle=DataTitles[i].split("#")<br>
    iBoxWidth+=parseInt(cTitle[1])<br>
  }<br>
}<br>
if(iBoxWidth>BoxWidth){<br>
  var Sure=confirm("n锁定栏位的宽度大於资料表显示的宽　　nn度，这可能会造成版面显示不正常。nnn您确定要继续吗？")<br>
}else{<br>
  Sure=true<br>
}<br>
if(Sure){<br>
  LockCols=(LockCols==n+1)?0:n+1<br>
  WriteTable()<br>
}<br>
}</p>
<p>function SYNC_Roll(){<br>
DataGroup1.style.posTop=-DataFrame3.scrollTop<br>
DataGroup2.style.posTop=-DataFrame3.scrollTop<br>
}<br>
window.onload=WriteTable<br>
</p>
<p><meta content="MSHTML 6.00.2800.1170" name="GENERATOR"><br>
</p>
<br>
<center>
<br>
<h4>锁定表格栏位范例网页</h4>
<br>
<table cellspacing="0" cellpadding="0" border="0">
<br>
  <tbody>
<br>
  <tr>
<br>
    <td></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"><br>
      <div id="DataTable"></div>
</tr>
</tbody>
</table>
<br>
<p>点取栏位标题可重新设定或解除目前的锁定状态</p>
</center>

提示：您可以先修改部分代码再运行

tbody区域滚动条

相关文章

精彩推荐