首页
所有分类
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模块模式分析
May 16 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
Jquery Easyui对话框组件Dialog使用详解（14）
Dec 19 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
vue-cli项目使用mock数据的方法（借助express）
Apr 15 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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
追加文本(1) 代理(2) 选择器(1) flex-shrink(1) 图片模糊(1) 文字识别(1) flex(1) canvas(2) GNN(1) 匹配文本(1)
You might like
缅甸的咖啡简史
2021/03/04 咖啡文化
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
浅析php创建者模式
2014/11/25 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
从零学Python之hello world
2014/05/21 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python实现数据写入excel表格
2018/03/25 Python
Python如何调用外部系统命令
2019/08/07 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
澳大利亚潮流尖端的快时尚品牌：Cotton On
2016/09/26 全球购物
澳大利亚波西米亚风情网上商店：Czarina
2019/03/18 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
后勤人员自我鉴定
2013/10/20 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
给医务人员表扬信
2014/01/12 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏