首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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之锁定表格栏位

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
批量修改标签css样式以input标签为例
Jul 31 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
JS异步宏队列微队列原理详解
Sep 09 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
基于vue的video播放器的实现示例
Feb 19 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
卡塔尔购物网站(3) 新西兰购物网站(42) 阿联酋购物网站(26) 斯洛伐克购物网站(7) 土耳其购物网站(10) 奥地利购物网站(28) 沙特阿拉伯购物网站(9) 波兰购物网站(52) 智利购物网站(5) 捷克购物网站(26)
You might like
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
javascript实时显示当天日期的方法
2015/05/20 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
详解webpack自定义loader初探
2018/08/29 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python logging模块原理解析及应用
2020/08/13 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
python常量折叠基础知识点讲解
2021/02/28 Python
英超联赛的首选足球：Mitre足球
2019/05/06 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
简历自我评价怎么写好呢？
2014/01/04 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
员工工作表扬信范文
2014/01/13 职场文书
医院总经理岗位职责
2014/02/04 职场文书
运动会800米加油稿
2014/02/22 职场文书
员工入职担保书范文
2014/04/01 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
Python 统计序列中元素的出现频度
2022/04/26 Python