教程集 > 脚本编程 > javascript > 正文 tbody区域滚动条

tbody区域滚动条

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供tbody区域滚动条等资源，欢迎您收藏本站，我们将为您提供最新的tbody区域滚动条资源

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

<p><HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE><br />  <META http-equiv=Content-Type content="text/html; charset=gb2312"><br />  <STYLE type=text/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>  <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")</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></SCRIPT></p>  <p><SCRIPT language=JavaScript><br />  var BoxWidth = 480    // 资料表显示宽度 ( 不含卷轴 )<br />  var ShowLine = 10    // 资料表显示列数<br />  var RsHeight = 21    // 资料列高度<br />  var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )</p>  <p>function WriteTable(){    // 写入表格<br />  var iBoxWidth=BoxWidth<br />  var NewHTML="<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;i  ){<br />    if(i<LockCols){<br />      var cTitle=DataTitles[i].split("#")<br />      iBoxWidth-=cTitle[1]<br />      var DynTip=((i 1)==LockCols)?"解除锁定":"锁定此栏位"<br />      NewHTML ="<td><div class=\"title\" style=\"width:" cTitle[1] "px;height:" RsHeight "px\" title=\"" DynTip "\" onclick=\"ResetTable(" i ")\">" cTitle[0] "</div></td>"<br />    }<br />  }<br />  NewHTML ="</tr>\<br />  <tr><td colspan=\"" LockCols "\">\<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:" iBoxWidth "px;overflow-x:scroll\">\<br />  <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"<br />  for(i=0;i<DataTitles.length;i  ){<br />    if(i>=LockCols){<br />      var cTitle=DataTitles[i].split("#")<br />      NewHTML ="<td><div class=\"title\" style=\"width:" cTitle[1] "px;height:" RsHeight "px\" title=\"锁定此栏位\" onclick=\"ResetTable(" i ")\">" cTitle[0] "</div></td>"<br />    }<br />  }<br />  NewHTML ="</tr>\<br />  <tr><td colspan=\"" (DataTitles.length-LockCols) "\">\<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;width:1px;visibility:hidden\"></div>\<br />  </div></td></tr></table>"<br />  DataTable.innerHTML=NewHTML<br />  ApplyData()<br />  }</p>  <p>function ApplyData(){    // 写入资料<br />  var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"<br />  for(i=0;i<DataFields.length;i  ){<br />    NewHTML ="<tr>"<br />    for(j=0;j<DataTitles.length;j  ){<br />      if(j<LockCols){<br />        var cTitle=DataTitles[j].split("#")<br />        NewHTML ="<td><div class=\"cdata\" style=\"width:" cTitle[1] "px;height:" RsHeight "px;text-align:" cTitle[2] "\">" DataFields[i][j] "</div></td>"<br />      }<br />    }<br />    NewHTML ="</tr>"<br />  }<br />  NewHTML ="</table>"<br />  DataGroup1.innerHTML=NewHTML</p>  <p><br />  var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"<br />  for(i=0;i<DataFields.length;i  ){<br />    NewHTML ="<tr>"<br />    for(j=0;j<DataTitles.length;j  ){<br />      if(j>=LockCols){<br />        var cTitle=DataTitles[j].split("#")<br />        NewHTML ="<td><div class=\"cdata\" style=\"width:" cTitle[1] "px;height:" RsHeight "px;text-align:" cTitle[2] "\">" 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>  <p>function ResetTable(n){<br />  var iBoxWidth=0<br />  for(i=0;i<DataTitles.length;i  ){<br />    if(i<(n 1)){<br />      var cTitle=DataTitles[i].split("#")<br />      iBoxWidth =parseInt(cTitle[1])<br />    }<br />  }<br />  if(iBoxWidth>BoxWidth){<br />    var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽　　\n\n度，这可能会造成版面显示不正常。\n\n\n您确定要继续吗？")<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 />  </SCRIPT></p>  <p><META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD><br />  <BODY><br />  <CENTER><br />  <H4>锁定表格栏位范例网页</H4><br />  <TABLE cellSpacing=0 cellPadding=0 border=0><br />    <TBODY><br />    <TR><br />      <TD <br />      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></TD></TR></TBODY></TABLE><br />  <P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML></p>

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

您可能感兴趣的文章：
jquery easyui滚动条部分设置介绍
 html中去掉textarea右侧滚动条和右下角拖拽
 jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
jQuery 瀑布流浮动布局（一）(延迟AJAX加载图片)
Javascript 连续滚动字幕的实现代码示例
 分享：JavaScropt获取网页、浏览器、屏幕高度和宽度的方法
 javascript禁用浏览器滚动条的方法
 jquery获取浏览器高度、宽度和滚动条高度
 JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
 移动端页面头部固定定位的绝对定位实现（代码示例）

上一篇：三级下拉菜单下一篇：鼠标划过，表格变色

[关闭]

tbody区域滚动条

最近更新

浏览排行