javascript之锁定表格栏位


Posted in Javascript onJune 29, 2007

<HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
       FONT: 12px 细明体; CURSOR: default
}
TD {
       FONT: 12px 细明体; CURSOR: default
}
.title {
       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
}
.cdata {
       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
}
</STYLE>

<SCRIPT language=JavaScript >
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 )
var DataTitles=new Array(
"歌手 / 团体#90 #left"  ,
"专辑名称   #130#left"  ,
"发行公司   #110#left"  ,
"本周排名   #58 #center",
"排名状况   #58 #center",
"上周排名   #58 #center",
"上榜周数   #58 #center",
"最高名次   #58 #center",
"销售百分比 #70 #center")

// 栏位资料 ( 二维阵列 )
var DataFields=new Array()
DataFields[0] =new Array("萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %")
DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %")
DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %")
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %")
DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")
DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")
DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %")
DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %")
DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %")
DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %")
DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")
DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")
DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %")
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")
DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")
DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")

</SCRIPT>

<SCRIPT language=JavaScript>
var BoxWidth = 480        // 资料表显示宽度 ( 不含卷轴 )
var ShowLine = 10        // 资料表显示列数
var RsHeight = 21        // 资料列高度
var LockCols = 1        // 要锁定的栏位数 ( 由左至右 )

function WriteTable(){        // 写入表格
var iBoxWidth=BoxWidth
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(i=0;i<DataTitles.length;i++){
 if(i<LockCols){
   var cTitle=DataTitles[i].split("#")
   iBoxWidth-=cTitle[1]
   var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
   NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\""+DynTip+"\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
 }
}
NewHTML+="</tr>\
<tr><td colspan=\""+LockCols+"\">\
<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:"+iBoxWidth+"px;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i<DataTitles.length;i++){
 if(i>=LockCols){
   var cTitle=DataTitles[i].split("#")
   NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\"锁定此栏位\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
 }
}
NewHTML+="</tr>\
<tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\
<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>"
DataTable.innerHTML=NewHTML
ApplyData()
}

function ApplyData(){        // 写入资料
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
 NewHTML+="<tr>"
 for(j=0;j<DataTitles.length;j++){
   if(j<LockCols){
     var cTitle=DataTitles[j].split("#")
     NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
   }
 }
 NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML

var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
 NewHTML+="<tr>"
 for(j=0;j<DataTitles.length;j++){
   if(j>=LockCols){
     var cTitle=DataTitles[j].split("#")
     NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
   }
 }
 NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup2.innerHTML=NewHTML
DataFrame1.style.pixelHeight=RsHeight*ShowLine
DataFrame2.style.pixelHeight=RsHeight*ShowLine
DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight
DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)
}

function ResetTable(n){
var iBoxWidth=0
for(i=0;i<DataTitles.length;i++){
 if(i<(n+1)){
   var cTitle=DataTitles[i].split("#")
   iBoxWidth+=parseInt(cTitle[1])
 }
}
if(iBoxWidth>BoxWidth){
 var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽

\n\n度,这可能会造成版面显示不正常。\n\n\n您确定要继续吗?")
}else{
 Sure=true
}
if(Sure){
 LockCols=(LockCols==n+1)?0:n+1
 WriteTable()
}
}

function SYNC_Roll(){
DataGroup1.style.posTop=-DataFrame3.scrollTop
DataGroup2.style.posTop=-DataFrame3.scrollTop
}
window.onload=WriteTable
</SCRIPT>

<META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H4>锁定表格栏位范例网页</H4><!--// 资料表 ( 开始 ) //-->
<TABLE cellSpacing=0 cellPadding=0 border=0>
 <TBODY>
 <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=DataTable></DIV></TD></TR></TBODY></TABLE><!--// 资料表 ( 结束 ) //-->
<P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML>

Javascript 相关文章推荐
JS匀速运动演示示例代码
Nov 26 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
js读取cookie方法总结
Oct 31 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
javascript之解决IE下不渲染的bug
Jun 29 #Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 #Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 #Javascript
javascript之函数直接量(function(){})()
Jun 29 #Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 #Javascript
JavaScript 编程引入命名空间的方法
Jun 29 #Javascript
你需要知道的JavsScript可以做什么?
Jun 29 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python线性方程组求解运算示例
2018/01/17 Python
python unittest实现api自动化测试
2018/04/04 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python 下划线的不同用法
2020/10/24 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
幼儿教师自我鉴定
2013/11/02 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
物理研修随笔感言
2014/02/14 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
周年庆典答谢词
2015/01/20 职场文书
邀请函怎么写
2015/01/30 职场文书
小学少先队活动总结
2015/05/08 职场文书
八年级作文之感恩
2019/11/22 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python