<HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
<METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312">
<STYLEtype=text/css>BODY{
FONT:12px细明体;CURSOR:default
}
TD{
FONT:12px细明体;CURSOR:default
}
.title{
BORDER-RIGHT:#5551pxsolid;PADDING-RIGHT:4px;BORDER-TOP:#fff1pxsolid;PADDING-LEFT:4px;BACKGROUND:#ccc;PADDING-BOTTOM:4px;OVERFLOW:hidden;BORDER-LEFT:#fff1pxsolid;CURSOR:hand;PADDING-TOP:4px;BORDER-BOTTOM:#5551pxsolid;WHITE-SPACE:nowrap
}
.cdata{
BORDER-RIGHT:#ddd1pxsolid;PADDING-RIGHT:3px;BORDER-TOP:#fff1pxsolid;PADDING-LEFT:3px;BACKGROUND:#fff;PADDING-BOTTOM:3px;OVERFLOW:hidden;BORDER-LEFT:#fff1pxsolid;PADDING-TOP:3px;BORDER-BOTTOM:#ddd1pxsolid;WHITE-SPACE:nowrap
}
</STYLE>
<SCRIPTlanguage=JavaScript>
//栏位标题(栏位名称#栏位宽度#资料对齐)
varDataTitles=newArray(
"歌手/团体#90#left",
"专辑名称#130#left",
"发行公司#110#left",
"本周排名#58#center",
"排名状况#58#center",
"上周排名#58#center",
"上榜周数#58#center",
"最高名次#58#center",
"销售百分比#70#center")
//栏位资料(二维阵列)
varDataFields=newArray()
DataFields[0]=newArray("萧亚轩","爱的主打歌-吻","维京Virgin","1","持平","1","2","1","2.9%")
DataFields[1]=newArray("张惠妹","发烧","华纳Warner","2","持平","2","2","2","2.1%")
DataFields[2]=newArray("陶吉吉","黑色柳丁","全员集合Shock","3","持平","3","5","1","1.8%")
DataFields[3]=newArray("S.H.E","美丽新世界","华研HIM","4","持平","4","6","1","1.2%")
DataFields[4]=newArray("艾薇儿","展翅高飞","博德曼BMG","5","新进榜","-","1","5","1.1%")
DataFields[5]=newArray("任贤齐","一个任贤齐","滚石Rock","6","新进榜","-","1","6","1.0%")
DataFields[6]=newArray("范逸臣","范逸臣第一张专辑","丰华Forward","7","持平","7","2","7","0.9%")
DataFields[7]=newArray("谢霆锋","无形的他全精选","新力Sony","8","下跌","6","4","4","0.9%")
DataFields[8]=newArray("周蕙","寂寞城市","福茂Decca","9","下跌","5","3","5","0.8%")
DataFields[9]=newArray("周杰伦","八度空间","博德曼BMG","10","下跌","8","8","1","0.8%")
DataFields[10]=newArray("酷玩乐团","玩过头","科艺百代EMI","11","上升","16","2","11","0.7%")
DataFields[11]=newArray("张震岳","等我有一天","魔岩Magicstone","12","新进榜","-","1","12","0.6%")
DataFields[12]=newArray("堂本刚","红与蓝","艾回Avex","13","新进榜","-","1","13","0.6%")
DataFields[13]=newArray("ENERGY","COMEON","环球Universal","14","下跌","10","9","5","0.6%")
DataFields[14]=newArray("陈冠希","TRANSITION","艾回Avex","15","下跌","9","3","5","0.4%")
DataFields[15]=newArray("合辑","MTV嘻哈大师","环球Universal","16","下跌","12","3","12","0.4%")
</SCRIPT>
<SCRIPTlanguage=JavaScript>
varBoxWidth=480//资料表显示宽度(不含卷轴)
varShowLine=10//资料表显示列数
varRsHeight=21//资料列高度
varLockCols=1//要锁定的栏位数(由左至右)
functionWriteTable(){//写入表格
variBoxWidth=BoxWidth
varNewHTML="<tableborder="0"cellpadding="0"cellspacing="0"><tr>
<td><divstyle="width:100%;overflow-x:scroll">
<tableborder="0"cellpadding="0"cellspacing="0"><tr>"
for(i=0;i<DataTitles.length;i++){
if(i<LockCols){
varcTitle=DataTitles[i].split("#")
iBoxWidth-=cTitle[1]
varDynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
NewHTML+="<td><divclass="title"style="width:"+cTitle[1]+"px;height:"+RsHeight+"px"title=""+DynTip+""onclick="ResetTable("+i+")">"+cTitle[0]+"</div></td>"
}
}
NewHTML+="</tr>
<tr><tdcolspan=""+LockCols+"">
<divid="DataFrame1"style="position:relative;width:100%;overflow:hidden">
<divid="DataGroup1"style="position:relative"></div></div>
</td></tr></table></div></td>
<tdvalign="top"><divstyle="width:"+iBoxWidth+"px;overflow-x:scroll">
<tableborder="0"cellpadding="0"cellspacing="0"><tr>"
for(i=0;i<DataTitles.length;i++){
if(i>=LockCols){
varcTitle=DataTitles[i].split("#")
NewHTML+="<td><divclass="title"style="width:"+cTitle[1]+"px;height:"+RsHeight+"px"title="锁定此栏位"onclick="ResetTable("+i+")">"+cTitle[0]+"</div></td>"
}
}
NewHTML+="</tr>
<tr><tdcolspan=""+(DataTitles.length-LockCols)+"">
<divid="DataFrame2"style="position:relative;width:100%;overflow:hidden">
<divid="DataGroup2"style="position:relative"></div>
</div></td></tr></table>
</div></td><tdvalign="top">
<divid="DataFrame3"style="position:relative;background:#000;overflow-y:scroll"onscroll="SYNC_Roll()">
<divid="DataGroup3"style="position:relative;width:1px;visibility:hidden"></div>
</div></td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}
functionApplyData(){//写入资料
varNewHTML="<tableborder="0"cellpadding="0"cellspacing="0">"
for(i=0;i<DataFields.length;i++){
NewHTML+="<tr>"
for(j=0;j<DataTitles.length;j++){
if(j<LockCols){
varcTitle=DataTitles[j].split("#")
NewHTML+="<td><divclass="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
varNewHTML="<tableborder="0"cellpadding="0"cellspacing="0">"
for(i=0;i<DataFields.length;i++){
NewHTML+="<tr>"
for(j=0;j<DataTitles.length;j++){
if(j>=LockCols){
varcTitle=DataTitles[j].split("#")
NewHTML+="<td><divclass="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)
}
functionResetTable(n){
variBoxWidth=0
for(i=0;i<DataTitles.length;i++){
if(i<(n+1)){
varcTitle=DataTitles[i].split("#")
iBoxWidth+=parseInt(cTitle[1])
}
}
if(iBoxWidth>BoxWidth){
varSure=confirm("n锁定栏位的宽度大於资料表显示的宽nn度，这可能会造成版面显示不正常。nnn您确定要继续吗？")
}else{
Sure=true
}
if(Sure){
LockCols=(LockCols==n+1)?0:n+1
WriteTable()
}
}
functionSYNC_Roll(){
DataGroup1.style.posTop=-DataFrame3.scrollTop
DataGroup2.style.posTop=-DataFrame3.scrollTop
}
window.onload=WriteTable
</SCRIPT>
<METAcontent="MSHTML6.00.2800.1170"name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H4>锁定表格栏位范例网页</H4><>
<TABLEcellSpacing=0cellPadding=0border=0>
<TBODY>
<TR>
<TD
style="BORDER-RIGHT:white2pxinset;BORDER-TOP:white2pxinset;BORDER-LEFT:white2pxinset;BORDER-BOTTOM:white2pxinset;BACKGROUND-COLOR:scrollbar">
<DIVid=DataTable></DIV></TD></TR></TBODY></TABLE><>
<P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML>
【javascript之锁定表格栏位】相关文章：