分享
 
 
 

数据表格[网页特效]

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

}

}

Ne

[1] [2] [3] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有