请帮忙实现table grid功能

[aarreess9960142]

整合一下两个js的功能


locktable.js


function DrawTable(scrTable,newTable,iStart,iEnd,jEnd){
var i,j,k=0,newTR,newTD,intWidth=0,intHeight=0;
newTable.mergeAttributes(scrTable);
for (i=iStart;i<iEnd;i++){
newTR=newTable.insertRow(k)
newTR.mergeAttributes(scrTable.rows[i]);
intHeight += scrTable.rows[i].offsetHeight;
intWidth=0;
for(j=0;j<(jEnd==-1?scrTable.rows[i].cells.length:jEnd);j++){
newTD=scrTable.rows[i].cells[j].cloneNode(true);
intWidth+= scrTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth=scrTable.rows[i].cells[j].offsetWidth;
}
k++
}
newTable.style.pixelWidth=intWidth;
newTable.style.pixelHeight=intHeight;
}

function LockTable(arTable,ColNum,RowHead,RowFoot){
arTable.HeadRow=RowHead;
var objDivMaster=arTable.parentElement;
if(objDivMaster.tagName!='DIV')return;
if((arTable.offsetHeight > objDivMaster.offsetHeight)&&(arTable.offsetWidth > objDivMaster.offsetWidth)){
if((ColNum > 0) && (RowHead > 0)){
var objTableLH=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLH.insertBefore(newTBody);
objTableLH.id="objTableLH";
objDivMaster.parentElement.insertBefore(objTableLH);
DrawTable(arTable,objTableLH,0,RowHead,ColNum)
objTableLH.srcTable=arTable;
with(objTableLH.style){
zIndex=804;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
}

if((ColNum > 0) && (RowFoot > 0)){
var objTableLF=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLF.insertBefore(newTBody);
objTableLF.id="objTableLF";
objDivMaster.parentElement.insertBefore(objTableLF);
DrawTable(arTable,objTableLF,arTable.rows.length - RowFoot,arTable.rows.length,ColNum)
objTableLF.srcTable=arTable;
with(objTableLF.style){
zIndex=803;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - objTableLF.offsetHeight - 16;
}
}
}

if((RowHead > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivHead=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivHead);
var objTableHead=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableHead.id="HeadTar";
objTableHead.style.position="relative"
objTableHead.insertBefore(newTBody);
DivHead.insertBefore(objTableHead);
DrawTable(arTable,objTableHead,0,RowHead,-1)
HeadTar.srcTable=arTable;
with(DivHead.style){
overflow="hidden";
zIndex=802;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute';
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll1);
}

if((RowFoot > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivFoot=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivFoot);
var objTableFoot=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableFoot.insertBefore(newTBody);
objTableFoot.id="FootTar";
objTableFoot.style.position="relative"
DivFoot.insertBefore(objTableFoot);
DrawTable(arTable,objTableFoot,arTable.rows.length - RowFoot,arTable.rows.length,-1)
objTableFoot.srcTable=arTable;
with(DivFoot.style){
overflow="hidden";
zIndex=801;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
objDivMaster.attachEvent("onscroll",divScroll2);
}

if((ColNum > 0) && (arTable.offsetWidth > objDivMaster.offsetWidth)){
var DivLeft=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivLeft);
var objTableLeft=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLeft.insertBefore(newTBody);
objTableLeft.id="LeftTar";
objTableLeft.style.position="relative";
DivLeft.insertBefore(objTableLeft);
DrawTable(arTable,objTableLeft,0,arTable.rows.length,ColNum)
LeftTar.srcTable=arTable;
with(DivLeft.style){
overflow="hidden";
zIndex=800;
pixelWidth=objDivMaster.offsetWidth - 16
pixelHeight=objDivMaster.offsetHeight - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll3);
}
}

function divScroll1(){
var tbl=document.all('HeadTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('HeadTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll2(){
var tbl=document.all('FootTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('FootTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll3(){
var tbl=document.all('LeftTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('LeftTar').style.pixelTop= -parDiv.scrollTop;
}

_____________________________________

lock.htm

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=big5">
<script language="javascript" src="locktable.js"></script>
</head>
<div style="MARGIN: 2pt; OVERFLOW: scroll;width:200px;height:100px;">
<table id="tbl" border=0 cellspacing="1" cellpadding="0" bgcolor=#660000>
<tr><td nowrap bgcolor=#bbbbbb>col一</td><td nowrap bgcolor=#bbbbbb>col二</td><td nowrap bgcolor=#bbbbbb>col三</td><td nowrap bgcolor=#bbbbbb>col四</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td bgcolor=#bbbbbb>dataA</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td><td bgcolor=#ffffff>dataB</td><td bgcolor=#ffffff>dataC</td><td bgcolor=#ffffff>dataD</td></tr>
<tr><td nowrap bgcolor=#bbbbbb>col一</td><td nowrap bgcolor=#bbbbbb>a</td><td nowrap bgcolor=#bbbbbb>b</td><td nowrap bgcolor=#bbbbbb>c</td></tr>
</table>
</div>
<script language="javascript">
LockTable(tbl,1,1,1);
</script>

[feandy]

接分来了!

[patchclass]

你这么贴这么长个代码,怎么让人看啊,我是没有耐心看:-)

[JK_10000]

调整一下窗口大小可以看到相关效果
----代码仅通过ie6.0测试，仅供参考

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>

.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
};

.relativeTag
{
position:relative;
};

.fixedHeaderCol
{
background-color:#cccccc;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
};

.mainDiv
{
overflow:auto;
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style>
</head>

<body>
部分代码来自：<br>

http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
<br>
<div class="mainDiv" id=mailContainerDiv>
<table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1">
<TR class="fixedHeaderTr" style="background:navy;color:white;">
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">Header A</TD>
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">Header B</TD>
<TD nowrap>Header C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol" >B</TD>
<TD nowrap >
部分代码来自：<br>
http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
</TR >
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>

[gu1dai]

up.

[liuph3000]

ding

========================================
http://peipei3000.jishuqi.com/reg.asp
http://www.goofar.com/?ID=634664011139
========================================