javascript之锁定表格栏位_javascript技巧

<script> <BR>// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 ) <BR>var DataTitles=new Array( <BR>"歌手 / 团体#90 #left" , <BR>"专辑名称 #130#left" , <BR>"发行公司 #110#left" , <BR>"本周排名 #58 #center", <BR>"排名状况 #58 #center", <BR>"上周排名 #58 #center", <BR>"上榜周数 #58 #center", <BR>"最高名次 #58 #center", <BR>"销售百分比 #70 #center") <br><br>// 栏位资料 ( 二维阵列 ) <BR>var DataFields=new Array() <BR>DataFields[0] =new Array("萧亚轩" ,"爱的主打歌-吻" ,"维京 Virgin" ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %") <BR>DataFields[1] =new Array("张惠妹" ,"发烧" ,"华纳 Warner" ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %") <BR>DataFields[2] =new Array("陶吉吉" ,"黑色柳丁" ,"全员集合 Shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %") <BR>DataFields[3] =new Array("S.H.E" ,"美丽新世界" ,"华研 HIM" ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %") <BR>DataFields[4] =new Array("艾薇儿" ,"展翅高飞" ,"博德曼 BMG" ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %") <BR>DataFields[5] =new Array("任贤齐" ,"一个任贤齐" ,"滚石 Rock" ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %") <BR>DataFields[6] =new Array("范逸臣" ,"范逸臣第一张专辑","丰华 Forward" ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %") <BR>DataFields[7] =new Array("谢霆锋" ,"无形的他全精选" ,"新力 Sony" ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %") <BR>DataFields[8] =new Array("周蕙" ,"寂寞城市" ,"福茂 Decca" ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %") <BR>DataFields[9] =new Array("周杰伦" ,"八度空间" ,"博德曼 BMG" ,"10","下跌" ,"8" ,"8","1" ,"0.8 %") <BR>DataFields[10]=new Array("酷玩乐团","玩过头" ,"科艺百代 EMI" ,"11","上升" ,"16","2","11","0.7 %") <BR>DataFields[11]=new Array("张震岳" ,"等我有一天" ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %") <BR>DataFields[12]=new Array("堂本刚" ,"红与蓝" ,"艾回 Avex" ,"13","新进榜","-" ,"1","13","0.6 %") <BR>DataFields[13]=new Array("ENERGY" ,"COME ON" ,"环球 Universal" ,"14","下跌" ,"10","9","5" ,"0.6 %") <BR>DataFields[14]=new Array("陈冠希" ,"TRANSITION" ,"艾回 Avex" ,"15","下跌" ,"9" ,"3","5" ,"0.4 %") <BR>DataFields[15]=new Array("合辑" ,"MTV 嘻哈大师" ,"环球 Universal" ,"16","下跌" ,"12","3","12","0.4 %") <br><br></script>

<script> <BR>var BoxWidth = 480 // 资料表显示宽度 ( 不含卷轴 ) <BR>var ShowLine = 10 // 资料表显示列数 <BR>var RsHeight = 21 // 资料列高度 <BR>var LockCols = 1 // 要锁定的栏位数 ( 由左至右 ) <br><br>function WriteTable(){ // 写入表格 <BR>var iBoxWidth=BoxWidth <BR>var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\ <BR><td><div style=\"width:100%;overflow-x:scroll\">\ <BR><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>" <BR>for(i=0;i<DataTitles.length;i++){ <BR> if(i<LockCols){ <BR> var cTitle=DataTitles[i].split("#") <BR> iBoxWidth-=cTitle[1] <BR> var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位" <BR> NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\""+DynTip+"\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"" <BR> } <BR>} <BR>NewHTML+="\ <BR><tr><td colspan=\""+LockCols+"\">\ <BR><div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\">\ <BR><div id=\"DataGroup1\" style=\"position:relative\">\ <BR>\ <BR><td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\">\ <BR><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>" <BR>for(i=0;i<DataTitles.length;i++){ <BR> if(i>=LockCols){ <BR> var cTitle=DataTitles[i].split("#") <BR> NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\"锁定此栏位\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"" <BR> } <BR>} <BR>NewHTML+="\ <BR><tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\ <BR><div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\">\ <BR><div id=\"DataGroup2\" style=\"position:relative\">\ <BR>\ <BR><td valign=\"top\">\ <BR><div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\">\ <BR><div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\">\ <BR>" <BR>DataTable.innerHTML=NewHTML <BR>ApplyData() <BR>} <br><br>function ApplyData(){ // 写入资料 <BR>var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" <BR>for(i=0;i<DataFields.length;i++){ <BR> NewHTML+="<tr>" <BR> for(j=0;j<DataTitles.length;j++){ <BR> if(j<LockCols){ <BR> var cTitle=DataTitles[j].split("#") <BR> NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"" <BR> } <BR> } <BR> NewHTML+="" <BR>} <BR>NewHTML+="" <BR>DataGroup1.innerHTML=NewHTML <br><br><BR>var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" <BR>for(i=0;i<DataFields.length;i++){ <BR> NewHTML+="<tr>" <BR> for(j=0;j<DataTitles.length;j++){ <BR> if(j>=LockCols){ <BR> var cTitle=DataTitles[j].split("#") <BR> NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"" <BR> } <BR> } <BR> NewHTML+="" <BR>} <BR>NewHTML+="" <BR>DataGroup2.innerHTML=NewHTML <BR>DataFrame1.style.pixelHeight=RsHeight*ShowLine <BR>DataFrame2.style.pixelHeight=RsHeight*ShowLine <BR>DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight <BR>DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1) <BR>} <br><br>function ResetTable(n){ <BR>var iBoxWidth=0 <BR>for(i=0;i<DataTitles.length;i++){ <BR> if(i<(n+1)){ <BR> var cTitle=DataTitles[i].split("#") <BR> iBoxWidth+=parseInt(cTitle[1]) <BR> } <BR>} <BR>if(iBoxWidth>BoxWidth){ <BR> var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽　　\n\n度，这可能会造成版面显示不正常。 \n\n您确定要继续吗？") <BR>}else{ <BR> Sure=true <BR>} <BR>if(Sure){ <BR> LockCols=(LockCols==n+1)?0:n+1 <BR> WriteTable() <BR>} <BR>} <br><br>function SYNC_Roll(){ <BR>DataGroup1.style.posTop=-DataFrame3.scrollTop <BR>DataGroup2.style.posTop=-DataFrame3.scrollTop <BR>} <BR>window.onload=WriteTable <BR></script>

锁定表格栏位范例网页

 
 
   

style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">

点取栏位标题可重新设定或解除目前的锁定状态