<HTML>
<HEAD>
<TITLE> 类似DATAGRID的表格 </TITLE>
<STYLE type=text/css>BODY {
FONT: 12px 细明体; CURSOR: default
}
TD {
FONT: 12px 细明体; CURSOR: default
}
.title {
BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #ccc; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: default; PADDING-TOP: 1px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 1px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function dzb(){
dv2.scrollLeft=60
dv2.scrollTop=20
}
function gridScroll(oGrid,gridid){
var iX = oGrid.scrollLeft;
var oHeader = document.getElementById("dtgMain");
oHeader.style.left = -iX;
}
function ct()
{
var str
str="<TR height='18' onmouseover=this.style.backgroundColor='#eeeeee' onmouseout=this.style.backgroundColor='' onmousedown=this.style.backgroundColor='#cccccc' onmouseup=this.style.backgroundColor='#eeeeee'>"
str=str+"<TD width='80' class='cdata'>1</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"<TD width='120' class='cdata'>test</TD>"
str=str+"</tr>"
for(i=1;i<11;i++)document.write(str)
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="dzb()">
<div style="width:457px;height:160px;overflow:hidden;border:1px #999999 solid" oncontextmenu="return false">
<div id="dtgMain_Header" style="position:absolute;top:0;left:0;WIDTH:440px;HEIGHT:17px;overflow:hidden" onscroll="gridScroll(this,'dtgMain')">
<TABLE Width="920" style="position:absolute" id="dtgMain" cellpadding="0" cellspacing="0" border="0">
<TR height="17">
<TD width="80" class="title">序号</TD>
<TD width="120" class="title">标题1</TD>
<TD width="120" class="title">标题2</TD>
<TD width="120" class="title">标题3</TD>
<TD width="120" class="title">标题4</TD>
<TD width="120" class="title">标题5</TD>
<TD width="120" class="title">标题6</TD>
<TD width="120" class="title">标题7</TD>
</TR>
</TABLE>
</div>
<div id="dv2" style="position:absolute;top:0px;left:0px;WIDTH:456px;HEIGHT:158px;overflow:scroll;z-index:-1" onscroll="gridScroll(this,'dtgMain')">
<TABLE Width="920" id="dtgMain" cellpadding="0" cellspacing="0" border="0">
<TR height="18"><TD colspan="8"> </TD></TR>
<script>ct()</script>
</TABLE>
</div>
</div>
</BODY>
</HTML>
posted on 2006-04-03 14:23
汪杰 阅读(172)
评论(0) 编辑 收藏 引用 所属分类:
hengxing网站js