首頁 > 開發者 > JavaScript

javascript之鎖定表格欄位

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More