管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript之锁定表格栏位

　　<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>

教程首页 更多教程