JavaScript实现表格左侧栏位锁定与滚动同步

JavaScript实现表格左侧栏位锁定与滚动同步

<!DOCTYPE html><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>