锁定表格栏位范例网页
2012-02-28 09:58
323 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0135)http://qbit.100steps.net/javascript/%B1%ED%B8%F1%B1%ED%CD%B7%B2%BB%B6%AFtbody%C7%F8%D3%F2%BF%C9%D3%C3%B9%F6%B6%AF%CC%F5%B9%F6%B6%AF.htm --> <HTML> <HEAD> <TITLE>锁定表格栏位范例网页 </TITLE> <META http-equiv=Content-Type content="text/html; charset=unicode"> <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.6000.16809" 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> 㙸
相关文章推荐
- 锁定表格栏位范例网页
- 锁定表格栏位范例网页
- 锁定表格栏位范例网页(html)
- 锁定表格栏位范例网页
- 网页中单一表格横纵表头锁定的细节
- 网页中表格表头锁定相关的一些链接
- 网页中单一表格横纵表头锁定的细节
- 网页中单一表格横纵表头锁定
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
- 使用DIV+CSS制作网页后,表格Table还有用吗?
- VBA获取网页表格数据
- 良无限:优秀的表格范例
- delphi 使用webbrowser取得网页中表格(Table)内容的正确方法
- 网页大背景在网页设计中应用的20个优秀范例
- HTML静态网页 标签、表格
- 简单实用的网页表格特效
- EXCEL自动填充列索引号 && EXCEL的列求和、行求和 && 如何获得网页上的歌曲 && EXCEL第一行锁定 && EXCEL曲线图 && WORD行间距规整
- python3 爬取网页表格例子
- 前端技术学习之道:html之简单网页表格制作
- 实例解析用Perl抓取网页和提交表格