JavaScript实现的数据表格：冻结列、调整列宽和客户端排序

偏执的太偏执、 2022-10-07 09:49 138阅读 0赞

来源: 未知作者: waxdollcheung 更新日期: \[2005-03-12\] 根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.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\] + "/" οncοntextmenu=/"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\] + "/" οncοntextmenu=/"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/" οnscrοll=/"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;' οnclick=/"SortTableAsc();hideMenu();/"><img src=/"images/asc.gif/" width=/"16/" height=/"16/">按升序排序</div>";  
txtHTML += "<div class=/"coolMenuItem/" style='padding-top: 1px;' οnclick=/"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;' οnclick=/"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;' οnclick=/"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">  
  
</script>  
</HEAD>  
<BODY onLoad="WriteTable();createMenu();" onClick="hideMenu();">  
<CENTER>  
<H4>&nbsp;</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>&nbsp;</P>  
<div id="objHeadMenu" style="position:absolute; width:124px; height:13px; z-index:1; left: 525px; top: 164px; visibility: hidden;" οncοntextmenu="return false;"></div>  
</CENTER></BODY></HTML>