快捷導(dǎo)航

javascript之鎖定表格欄位

更新時(shí)間：2007年06月29日 00:00:00 作者：

<HTML><HEAD><TITLE>鎖定表格欄位范例網(wǎng)頁</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
       FONT: 12px 細(xì)明體; CURSOR: default
}
TD {
       FONT: 12px 細(xì)明體; 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 >
// 欄位標(biāo)題 ( 欄位名稱 # 欄位寬度 # 資料對(duì)齊 )
var DataTitles=new Array(
"歌手 / 團(tuán)體#90 #left"  ,
"專輯名稱   #130#left"  ,
"發(fā)行公司   #110#left"  ,
"本周排名   #58 #center",
"排名狀況   #58 #center",
"上周排名   #58 #center",
"上榜周數(shù)   #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("張惠妹"  ,"發(fā)燒"            ,"華納 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" ,"新進(jìn)榜","-" ,"1","5" ,"1.1 %")
DataFields[5] =new Array("任賢齊"  ,"一個(gè)任賢齊"      ,"滾石 Rock"      ,"6" ,"新進(jìn)榜","-" ,"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("酷玩樂團(tuán)","玩過頭"          ,"科藝百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")
DataFields[11]=new Array("張震岳"  ,"等我有一天"      ,"魔巖 Magicstone","12","新進(jìn)榜","-" ,"1","12","0.6 %")
DataFields[12]=new Array("堂本剛"  ,"紅與藍(lán)"          ,"艾回 Avex"      ,"13","新進(jìn)榜","-" ,"1","13","0.6 %")
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"環(huán)球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")
DataFields[14]=new Array("陳冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")
DataFields[15]=new Array("合輯"    ,"MTV 嘻哈大師"    ,"環(huán)球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")

</SCRIPT>

<SCRIPT language=JavaScript>
var BoxWidth = 480        // 資料表顯示寬度 ( 不含卷軸 )
var ShowLine = 10        // 資料表顯示列數(shù)
var RsHeight = 21        // 資料列高度
var LockCols = 1        // 要鎖定的欄位數(shù) ( 由左至右 )

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度，這可能會(huì)造成版面顯示不正常。\n\n\n您確定要繼續(xù)嗎？")
}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>鎖定表格欄位范例網(wǎng)頁</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>點(diǎn)取欄位標(biāo)題可重新設(shè)定或解除目前的鎖定狀態(tài)</P></CENTER></BODY></HTML>

您可能感興趣的文章:

javascript之鎖定表格欄位

相關(guān)文章

微信小程序?qū)崿F(xiàn)錄音
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錄音，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
可以用來調(diào)試JavaScript錯(cuò)誤的解決方案
我們?cè)跁鴮慾s的過程中，經(jīng)常會(huì)出現(xiàn)一些js錯(cuò)誤，對(duì)于如果找出錯(cuò)誤的解決方法就是關(guān)鍵，下面的文章就是相關(guān)的調(diào)試方法。
2010-08-08
thinkphp實(shí)現(xiàn)無限分類（使用遞歸）
這篇文章主要介紹了在使用遞歸的情況下thinkphp實(shí)現(xiàn)無限分類，感興趣的小伙伴們可以參考一下
2015-12-12
微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
微信小程序?qū)崿F(xiàn)注冊(cè)登錄功能(表單校驗(yàn)、錯(cuò)誤提示)
這篇文章主要介紹了微信小程序實(shí)現(xiàn)注冊(cè)、登錄功能(表單校驗(yàn)、錯(cuò)誤提示),本文通過代碼給大家詳細(xì)介紹，需要的朋友可以參考下
2019-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)抽選獲獎(jiǎng)?wù)撸闹惺纠a介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11

詳解如何在Javascript和Sass之間共享變量

這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2019-11-11

詳解json串反轉(zhuǎn)義（消除反斜杠）

這篇文章主要介紹了詳解json串反轉(zhuǎn)義（消除反斜杠），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2019-08-08

JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條

對(duì)于有很多流程的東西，我們希望能夠根據(jù)不同的階段，用流程條對(duì)應(yīng)地進(jìn)行顯示，非常直觀，給用戶帶來極好的用戶體驗(yàn)，下面小編給大家分享JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條功能，需要的的朋友參考下

2017-03-03

基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果

這篇文章主要為大家詳細(xì)介紹了基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2016-11-11

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

javascript之鎖定表格欄位

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具