<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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 {
BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 2px outset; FONT-SIZE: 9pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 1px; BORDER-BOTTOM: buttonshadow 1px solid; POSITION: absolute; HEIGHT: 1px; BACKGROUND-COLOR: menu
}
.coolMenu .coolMenuItem {
PADDING-RIGHT: 10px; MARGIN: 1px; OVERFLOW: hidden; CURSOR: hand; HEIGHT: 20px
}
.coolMenu .coolMenuItem IMG {
MARGIN-LEFT: 1px; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 6px
}
.coolMenu .coolMenuItem .coolMenuMore {
FONT-FAMILY: webdings
}
.coolMenu .coolMenuDivider {
BORDER-RIGHT: 1px inset; BORDER-TOP: buttonshadow 1px inset; MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; MARGIN-LEFT: 2px; OVERFLOW: hidden; BORDER-LEFT: 1px inset; BORDER-BOTTOM: buttonhighlight 1px inset; HEIGHT: 2px
}
.sinput {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT-SIZE: 9pt; BORDER-LEFT: 0px; WIDTH: 15pt; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: 宋体,Arial; 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锁定栏位的宽度大於资料表显示的宽 nn度，这可能会造成版面显示不正常。nnn您确定要继续吗？")
}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.2900.2096" 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 onclick=hideMenu(); onload=WriteTable();createMenu();>
<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>
<DIV oncontextmenu="return false;" id=objHeadMenu
style="Z-INDEX: 1; LEFT: 525px; VISIBILITY: hidden; WIDTH: 124px; POSITION: absolute; TOP: 164px; HEIGHT: 13px"></DIV></CENTER></BODY></HTML>
