首页
所有分类
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 相关文章推荐
Javascript &amp; DHTML 实例编程（教程）DOM基础和基本API
Jun 02 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
chrome调试javascript详解
Oct 21 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
js获取浏览器地址（获取第1个斜杠后的内容）
Sep 03 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
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
FTP(9) 线程池(1) 3389(1) 池化技术(1) DHCP(2) systemctl(1) Spring Data JPA(4) Ubuntu Server(6) 域控制器(1) Repository接口(3)
You might like
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
javascript实用方法总结
2015/02/06 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容（上）
2018/04/18 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python类定义和类继承详解
2015/05/08 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python3注册全局热键的实现
2020/03/22 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
纽约手袋品牌：KARA
2018/03/18 全球购物
植村秀加拿大官网：Shu Uemura加拿大
2019/09/03 全球购物
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
师范生见习报告范文
2014/11/03 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
上诉答辩状范文
2015/05/22 职场文书