本文來源于網頁設計愛好者web開發社區http://www.html.org.cn收集整理，歡迎訪問。
根據網上的一些腳本改的，大家看一下，應該對開發有用，準備在.net下寫個server-side端控件
把下面的代碼另存為.htm文件后看下效果。
<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: lightblue; padding-bottom: 4px; overflow: hidden; border-left: #fff 1px solid; cursor: hand; padding-top: 4px; border-bottom: #555 1px solid; white-space: nowrap
}
.cdata {
padding-right: 3px; border-top: #fff 1px solid; padding-left: 3px; padding-bottom: 3px; overflow: hidden; padding-top: 3px; border-bottom: #ddd 1px solid; white-space: nowrap
}
.coolmenu
{
position: absolute;
height: 1px;
width: 1px;
font-size: 9pt;
background-color: menu;
border-top: 2px outset buttonhighlight;
border-left: 2px outset buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
visibility: hidden;
}
.coolmenu .coolmenuitem
{
height: 20px;
margin: 1px;
padding-right: 10px;
cursor: hand;
overflow: hidden;
}
.coolmenu .coolmenuitem img
{
vertical-align: middle;
margin-left: 1px;
margin-right: 6px;
}
.coolmenu .coolmenuitem .coolmenumore
{
font-family: webdings;
}
.coolmenu .coolmenudivider
{
border: 1px inset;
border-top-color: buttonshadow;
border-bottom-color: buttonhighlight;
height: 2px;
overflow: hidden;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
}
.sinput
{
border-bottom: black 1px solid;
border-left: 0px;
border-right: 0px;
border-top: 0px;
font-family: 宋體,arial;
font-size: 9pt;
width: 15pt;
height: 12pt;
}
</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#數值",
"發行日期 #100 #right#日期"
)
// 欄位資料 ( 二維陣列 )
var datafields=new array()
datafields[0] =new array("蕭亞軒蕭亞軒蕭亞軒蕭亞軒蕭亞軒蕭亞軒蕭亞軒蕭亞軒" ,"愛的主打歌-吻" ,"維京 virgin" ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %", "2004-1-1")
datafields[1] =new array("張惠妹" ,"發燒" ,"華納 warner" ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %", "2004-2-10")
datafields[2] =new array("陶吉吉" ,"黑色柳丁" ,"全員集合 shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %", "2004-2-09")
datafields[3] =new array("s.h.e" ,"美麗新世界" ,"華研 him" ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %", "2003-1-1")
datafields[4] =new array("艾薇兒" ,"展翅高飛" ,"博德曼 bmg" ,"5" ,"新進榜","-" ,"1","5" ,"1.1 %", "2004-4-4")
datafields[5] =new array("任賢齊" ,"一個任賢齊" ,"滾石 rock" ,"6" ,"新進榜","-" ,"1","6" ,"1.0 %", "2002-10-11")
datafields[6] =new array("范逸臣" ,"范逸臣第一張專輯","豐華 forward" ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %", "2002-12-11")
datafields[7] =new array("謝霆鋒" ,"無形的他全精選" ,"新力 sony" ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %", "2004-1-1")
datafields[8] =new array("周蕙" ,"寂寞城市" ,"福茂 decca" ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %", "2004-1-1")
datafields[9] =new array("周杰倫" ,"八度空間" ,"博德曼 bmg" ,"10","下跌" ,"8" ,"8","1" ,"0.8 %", "2004-1-1")
datafields[10]=new array("酷玩樂團","玩過頭" ,"科藝百代 emi" ,"11","上升" ,"16","2","11","0.7 %", "2004-1-1")
datafields[11]=new array("張震岳" ,"等我有一天" ,"魔巖 magicstone","12","新進榜","-" ,"1","12","0.6 %", "2004-1-1")
datafields[12]=new array("堂本剛" ,"紅與藍" ,"艾回 avex" ,"13","新進榜","-" ,"1","13","0.6 %", "2004-1-1")
datafields[13]=new array("energy" ,"come on" ,"環球 universal" ,"14","下跌" ,"10","9","5" ,"0.6 %", "2004-1-1")
datafields[14]=new array("陳冠希" ,"transition" ,"艾回 avex" ,"15","下跌" ,"9" ,"3","5" ,"0.4 %", "2004-1-1")
datafields[15]=new array("合輯" ,"mtv 嘻哈大師" ,"環球 universal" ,"16","下跌" ,"12","3","12","0.4 %", "2004-1-1")
</script>
<script language=javascript>
var boxwidth = 480 // 資料表顯示寬度 ( 不含滾動條)
var showline = 10 // 資料表顯示列數
var rsheight = 21 // 資料列高度
var lockcols = 1 // 要鎖定的欄位數 ( 由左至右 )
var rowcolor = "linen"
var rowalternativecolor = "#d9ffd3"
var rowmouseovercolor = "lightsteelblue"
var rowselectedcolor = "cornflowerblue"
//記錄每次右擊的列的索引。
var columnrc = 0
//記錄被單擊過的行的索引。
var rowc = -1;
function setrowcolor(srowindex, scolor)
{
for(i=0;i<lefttable.rows[srowindex].cells.length;i++)
lefttable.rows[srowindex].cells[i].style.backgroundcolor = scolor;
for(i=0;i<righttable.rows[srowindex].cells.length;i++)
righttable.rows[srowindex].cells[i].style.backgroundcolor = scolor;
}
function resetrowcolor(srowindex)
{
var scolor = null;
if (srowindex % 2 ==0)
scolor = rowcolor;
else
scolor = rowalternativecolor;
setrowcolor(srowindex, scolor);
}
function sorttableasc()
{
var ctitle=datatitles[columnrc].split("#");
switch(ctitle[3])
{
case "文本" :
alert("暫時不支持文本排序！漢字的拼音問題尚未解決！");
break;
case "數值" :
var minindex = 0;
var temparray = new array();
for(i=0;i<datafields.length;i++)
{
minindex = i;
var leftmin = parsefloat(datafields[i][columnrc]);
for(j=i+1;j<datafields.length;j++)
{
if (leftmin>parsefloat(datafields[j][columnrc]))
{
leftmin = parsefloat(datafields[j][columnrc]);
minindex = j;
}
}
if (minindex != i)
{
for(h=0;h<datafields[i].length;h++)
{
temparray[h] = datafields[i][h];
datafields[i][h] = datafields[minindex][h];
datafields[minindex][h] = temparray[h];
}
}
}
applydata();
break;
case "日期" :
var minindex = 0;
var temparray = new array();
for(i=0;i<datafields.length;i++)
{
//日期必須是yyyy-mm-dd格式的。
minindex = i;
var leftmin = datafields[i][columnrc].split("-");
for(j=i+1;j<datafields.length;j++)
{
var currentdate = datafields[j][columnrc].split("-");
if ( ( parseint(leftmin[0]) > parseint(currentdate[0]) ) || ( ( leftmin[0] == currentdate[0] ) && ( parseint(leftmin[1]) > parseint(currentdate[1]) ) ) || ( ( leftmin[0] == currentdate[0] ) && ( leftmin[1] == currentdate[1] ) && ( parseint(leftmin[2]) > parseint(currentdate[2]) ) ) )
{
leftmin[0] = currentdate[0];
leftmin[1] = currentdate[1];
leftmin[2] = currentdate[2];
minindex = j;
}
}
if (minindex != i)
{
for(h=0;h<datafields[i].length;h++)
{
temparray[h] = datafields[i][h];
datafields[i][h] = datafields[minindex][h];
datafields[minindex][h] = temparray[h];
}
}
}
applydata();
break;
}
}
function sorttabledesc()
{
var ctitle=datatitles[columnrc].split("#");
switch(ctitle[3])
{
case "文本" :
alert("暫時不支持文本排序！漢字的拼音問題尚未解決！");
break;
case "數值" :
var minindex = 0;
var temparray = new array();
for(i=0;i<datafields.length;i++)
{
minindex = i;
var leftmin = parsefloat(datafields[i][columnrc]);
for(j=i+1;j<datafields.length;j++)
{
if (leftmin<parsefloat(datafields[j][columnrc]))
{
leftmin = parsefloat(datafields[j][columnrc]);
minindex = j;
}
}
if (minindex != i)
{
for(h=0;h<datafields[i].length;h++)
{
temparray[h] = datafields[i][h];
datafields[i][h] = datafields[minindex][h];
datafields[minindex][h] = temparray[h];
}
}
}
applydata();
break;
case "日期" :
var minindex = 0;
var temparray = new array();
for(i=0;i<datafields.length;i++)
{
//日期必須是yyyy-mm-dd格式的。
minindex = i;
var leftmin = datafields[i][columnrc].split("-");
for(j=i+1;j<datafields.length;j++)
{
var currentdate = datafields[j][columnrc].split("-");
if ( ( parseint(leftmin[0]) < parseint(currentdate[0]) ) || ( ( leftmin[0] == currentdate[0] ) && ( parseint(leftmin[1]) < parseint(currentdate[1]) ) ) || ( ( leftmin[0] == currentdate[0] ) && ( leftmin[1] == currentdate[1] ) && ( parseint(leftmin[2]) < parseint(currentdate[2]) ) ) )
{
leftmin[0] = currentdate[0];
leftmin[1] = currentdate[1];
leftmin[2] = currentdate[2];
minindex = j;
}
}
if (minindex != i)
{
for(h=0;h<datafields[i].length;h++)
{
temparray[h] = datafields[i][h];
datafields[i][h] = datafields[minindex][h];
datafields[minindex][h] = temparray[h];
}
}
}
applydata();
break;
}
}
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/" id=/"lefthead/"><tr>"
for(i=0;i<datatitles.length;i++){
if(i<lockcols){
var ctitle=datatitles[i].split("#")
iboxwidth-=ctitle[1]
newhtml+="<td><div class=/"title/" style=/"width:"+ctitle[1]+"px;height:"+rsheight+"px/" align=/"" + ctitle[2] + "/" oncontextmenu=/"headrightclick()/">"+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/" id=/"righthead/"><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/" align=/"" + ctitle[2] + "/" oncontextmenu=/"headrightclick()/">"+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 id=/"lefttable/" onmouseover=/"overcolor()/" onclick=/"clickcolor()/" onmouseout=/"outcolor()/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"
for(i=0;i<datafields.length;i++){
if (i %2 == 0)
newhtml+="<tr bgcolor=/"" + rowcolor + "/">"
else
newhtml+="<tr bgcolor=/"" + rowalternativecolor + "/">"
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 id=/"righttable/" onmouseover=/"overcolor()/" onclick=/"clickcolor()/" onmouseout=/"outcolor()/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">"
for(i=0;i<datafields.length;i++){
if (i %2 == 0)
newhtml+="<tr bgcolor=/"" + rowcolor + "/">"
else
newhtml+="<tr bgcolor=/"" + rowalternativecolor + "/">"
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(){
var iboxwidth=0
for(i=0;i<datatitles.length;i++){
if(i<(columnrc+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==columnrc+1)?0:columnrc+1
writetable()
}
}
function sync_roll(){
datagroup1.style.postop=-dataframe3.scrolltop
datagroup2.style.postop=-dataframe3.scrolltop
}
function clickcolor()
{
try
{
var oel = event.srcelement;
if (oel)
if (oel.tagname == "div")
{
try
{
oel = oel.parentelement.parentelement;
}
catch (e)
{
return;
}
}
if (oel.tagname == "td")
oel = oel.parentelement;
var sindex = oel.rowindex;
setrowcolor(sindex, rowselectedcolor);
if (rowc >= 0)
if (rowc != sindex)
resetrowcolor(rowc);
rowc = sindex;
}
catch (e)
{}
}
function overcolor()
{
var oel = event.srcelement;
if (oel)
if (oel.tagname == "div")
{
try
{
oel = oel.parentelement.parentelement;
}
catch (e)
{
return;
}
}
if (oel.tagname == "td")
oel = oel.parentelement;
var sindex = oel.rowindex;
if (rowc >= 0)
if (sindex == rowc)
return;
setrowcolor(sindex, rowmouseovercolor);
}
function outcolor()
{
var oel = event.srcelement;
if (oel)
if (oel.tagname == "div")
{
try
{
oel = oel.parentelement.parentelement;
}
catch (e)
{
return;
}
}
if (oel.tagname == "td")
oel = oel.parentelement;
var sindex = oel.rowindex;
if (rowc >= 0)
if (sindex == rowc)
return;
resetrowcolor(sindex);
}
function headrightclick()
{
var ev = window.event;
var el = ev.srcelement;
if (el.tagname == "div")
{
showmenu(ev.clientx, ev.clienty);
ev.cancelbubble = true;
ev.returnvalue = false;
var ep = el.parentelement;
columnrc = ep.cellindex;
ep = el.parentelement.parentelement.parentelement.parentelement;
if (ep.tagname == "table")
{
if (ep.id == "righthead")
columnrc += lockcols;
}
}
}
function showmenu(x, y)
{
var intrightedge = window.document.body.clientwidth - x;
var intbottomedge = window.document.body.clientheight - y;
var intscrollleft = window.document.body.scrollleft + x;
var intscrolltop = window.document.body.scrolltop + y;
if (intrightedge < objheadmenu.offsetwidth)
objheadmenu.style.left = intscrollleft - objheadmenu.offsetwidth;
else
objheadmenu.style.left = intscrollleft;
if (intbottomedge < objheadmenu.offsetheight)
objheadmenu.style.top = intscrolltop - objheadmenu.offsetheight;
else
objheadmenu.style.top = intscrolltop;
objheadmenu.style.zindex = 50;
objheadmenu.style.filter = "blendtrans(duration=0.50) progid:dximagetransform.microsoft.shadow(color=#323232, direction=135, strength=3)";
if (objheadmenu.filters.blendtrans.status != 2)
{
objheadmenu.filters.blendtrans.apply();
objheadmenu.style.visibility = "visible";
objheadmenu.filters.blendtrans.play();
}
}
function hidemenu()
{
objheadmenu.style.filter = "blendtrans(duration=0.50) progid:dximagetransform.microsoft.shadow(color=#323232, direction=135, strength=3)";
if (objheadmenu.filters.blendtrans.status != 2)
{
objheadmenu.filters.blendtrans.apply();
objheadmenu.style.visibility = "hidden";
objheadmenu.filters.blendtrans.play();
}
}
//加列寬
function setcwp(valwidth)
{
var ctitle = datatitles[columnrc].split("#");
var cwidth = parseint(ctitle[1]) + parseint(valwidth);
datatitles[columnrc] = ctitle[0] + "#" + cwidth + "#" + ctitle[2] + "#" + ctitle[3];
writetable();
}
//減列寬
function setcwm(valwidth)
{
var ctitle = datatitles[columnrc].split("#");
var cwidth = parseint(ctitle[1]) - parseint(valwidth);
if (cwidth <= 0) return;
datatitles[columnrc] = ctitle[0] + "#" + cwidth + "#" + ctitle[2] + "#" + ctitle[3];
writetable();
}
/*
右鍵菜單上的兩個調整列寬的文本框的keydown事件，用于捕捉"enter"時調整列寬并隱藏菜單
*/
function cwkeydown()
{
if (event.keycode == 13)
{
var oel = event.srcelement;
if (oel.id == "txtcwplus")
setcwp(txtcwplus.value);
if (oel.id == "txtcwminus")
setcwm(txtcwminus.value);
hidemenu();
}
}
function createmenu()
{
var txthtml = "<div class=/"coolmenuitem/" style='padding-top: 1px;' onclick=/"sorttableasc();hidemenu();/"><img src=/"images/asc.gif/" width=/"16/" height=/"16/">按升序排序</div>";
txthtml += "<div class=/"coolmenuitem/" style='padding-top: 1px;' onclick=/"sorttabledesc();hidemenu();/"><img src=/"images/desc.gif/" width=/"16/" height=/"16/">按降序排序</div>";
txthtml +="<div class=/"coolmenudivider/"></div>";
txthtml += "<div class=/"coolmenuitem/" style='padding-top: 1px;' onclick=/"resettable();hidemenu();/"><img src=/"images/blank.gif/" width=/"16/" height=/"16/">鎖定列</div>";
txthtml += "<div class=/"coolmenudivider/"></div>";
txthtml += "<div class=/"coolmenuitem/" style='padding-top: 1px;' onclick=/"setcwp(txtcwplus.value);/" onmouseover=/"txtcwplus.focus();/"><img src=/"images/blank.gif/" width=/"16/" height=/"16/">列寬 + <input type=/"text/" id=/"txtcwplus/" class=/"sinput/" value=/"20/" onkeydown=/"cwkeydown();/"> px</div>";
txthtml += "<div class=/"coolmenuitem/" style='padding-top: 1px;' onclick=/"setcwm(txtcwminus.value);/" onmouseover=/"txtcwminus.focus()/"><img src=/"images/blank.gif/" width=/"16/" height=/"16/">列寬 - <input type=/"text/" id=/"txtcwminus/" class=/"sinput/" value=/"20/" onkeydown=/"cwkeydown();/"> px</div>";
objheadmenu.classname = "coolmenu";
objheadmenu.innerhtml = txthtml;
window.document.body.insertadjacentelement("afterbegin", objheadmenu);
}
</script>
<meta content="mshtml 6.00.2800.1170" name=generator>
<script language="javascript" type="text/javascript">
<!--
function mm_reloadpage(init) { //reloads the window if nav4 resized
if (init==true) with (navigator) {if ((appname=="netscape")&&(parseint(appversion)==4)) {
document.mm_pgw=innerwidth; document.mm_pgh=innerheight; onresize=mm_reloadpage; }}
else if (innerwidth!=document.mm_pgw || innerheight!=document.mm_pgh) location.reload();
}
mm_reloadpage(true);
//-->
</script>
</head>
<body onload="writetable();createmenu();" onclick="hidemenu();">
<center>
<h4> </h4>
<!--// 資料表 ( 開始 ) //-->
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td >
<div id=datatable>
</div></td></tr></tbody></table><!--// 資料表 ( 結束 ) //-->
<p> </p>
<div id="objheadmenu" oncontextmenu="return false;"></div>
</center></body></html>
