高分相求,高难度滚动条控制问题(分不够再加)

ft.htm
那个例子我看过了,它只做到了我的一个要求,即保持表头(第一行不变),可我现在要的是:左右拖动滚动条的时候,第一列的内容也要不变的,那个例子是让表头的部分另外新建出一个层,将它覆盖在原表格的第一行之上,如果我的第一列也采取那种方式的话,那么就是分为三部分,是间部分的滚动拖动的时候,另外的两个部分的滚动照样不会滚动同步的啊.
如果用FRAME的话,那也是一样关键问题是:分成几个部分,或者用层分,或者用FRAME分,怎么保证我的是间部分滚动的时候别的部分也能同步的滚动?另外,我的字段的长度(也表格的列宽)不是固定不变,该页面是根据用户选择的字段自动生成的,这也成了个麻烦的问题.

用框架，写起来简单些
                    | 宾栏，跟踪数据栏水平滚动条
--------------------+-----------------------------------
   主栏，跟踪数据栏  | 数据栏
    垂直滚动条      | 宾栏页面中
<script language=javascript>
var position=0,pos2=0;
function scroller() {
position=parent.frames[4].document.body.scrollLeft;
if(position!=pos2){scroll(position,0);pos2=position;}
clearTimeout(timer);
var timer = setTimeout('scroller()',10);
timer;
}
scroller() ;
</script>主栏页面中
<script language=javascript>
var position=0,pos2=0;
function scroller() {
position=parent.frames[4].document.body.scrollTop;
if(position!=pos2){scroll(0,position);pos2=position;}
clearTimeout(timer);
var timer = setTimeout('scroller()',1);
timer;
}
scroller() ;
</script>说明
parent.frames[4]为数据栏页面

多谢xuzuning(唠叨)兄上面给的代码,不过我对这方面的JS内容很菜的啊,有关document.body.scrollLeft和document.body.scrollTop这两个东东都不清楚啊,老兄能不能详细说说,或给一个详细一点的例子,我之前看了不少的例子,都只是针对于两个部分的,一个表头部分,一个是主体部分,可我应用到我的实际中的三个部分时,滚动起来就无法保持同步了,我还有一个第一列的部分的. ++++++++++++++++++++++++++++++++++++++++++++++++(第一行,表头部分)
&&
&& #############################################
&& #                                           #
&& #                                           #
&& #          (主体部分)                       #
&& #                                           #
&& #                                           #
&& #                                           #
&& #############################################
(第一列部分)

http://jkisjk.vip.sina.com/code/html/fixHeadTr.htm点一下该页面的按钮，将窗口最小化后改变窗口大小就可以看到效果效果：
固定首行
因定左边n列

回复人： cql0007(蓝月) ( ) 信誉：100  2003-06-17 09:06:00  得分:0

  多谢xuzuning(唠叨)兄上面给的代码,不过我对这方面的JS内容很菜的啊,有关document.body.scrollLeft和document.body.scrollTop这两个东东都不清楚啊,老兄能不能详细说说,或给一个详细一点的例子,我之前看了不少的例子,都只是针对于两个部分的,一个表头部分,一个是主体部分,可我应用到我的实际中的三个部分时,滚动起来就无法保持同步了,我还有一个第一列的部分的. ++++++++++++++++++++++++++++++++++++++++++++++++(第一行,表头部分)
&&
&& #############################################
&& #                                           #
&& #                                           #
&& #          (主体部分)                       #
&& #                                           #
&& #                                           #
&& #                                           #
&& #############################################
(第一列部分)
-----------------------------------------------------------------事实上不是三个部分，而应该是四个部分，
第一行也得分两个部分，左边的一点永远是固定的，右边的只可以水平卷动
除第一行外的部分也分两部分，左边的只可以上下卷动，右边的可以水平|上下卷动

非常感谢JK_10000(JK) 兄,看了效果,很象我所要的,我再看看,解决了问题后马上结帖,另外一个版还有一个帖(100分的),一起结给你了.若老兄有时间给我的说明,那我可能会看起来轻松多了,那就更好啦,呵呵.(不是我贪心不足,实在是现在时间紧急啊)

<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head><script language=javascript>
var The10TableWidth=0;//JK
function  changeColWidth()//JK：本函数功能主要是进行宽度对齐，本函数只执行一次
{
if(document.all("the10Table")==null) return false;
if(the11Table.rows[0].style.display=="none")return false;
The10TableWidth=the10Table.offsetWidth;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)//将左半部分的宽度对齐
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
if(the10Table.rows[1]) the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)//将右半部分的宽度对齐
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
if(the11Table.rows[1]) the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;
the01Div.style.width=the11Div.style.width;
the10Table.rows[0].style.display="none";//去掉表头行，也可以把本行去掉
the11Table.rows[0].style.display="none";//同上

changeDivHeight();
document.body.onresize=changeDivHeight;

}function changeDivHeight()//JK：本函数主要用于根据当前窗口大小及表单所在位置来确定卷动条的宽与高，其中部分数字可以自动调整一下(比如其中的30，20两个数值，它与其它tag的margin设置有关
{
if(document.all("the10Table")==null) return false;
var theTopToBody=the10Div.offsetTop;
var theOffsetElement=the10Div;
while(theOffsetElement=theOffsetElement.offsetParent)
theTopToBody+=theOffsetElement.offsetTop;
var newHeight=document.body.clientHeight-theTopToBody-30;
if(the10Table.offsetHeight<newHeight-30){
the10Div.style.height=null;
the11Div.style.height=null;
}
else if(newHeight>10){
the10Div.style.height=newHeight;
the11Div.style.height=newHeight;
}
var the11DivWidth=document.body.clientWidth-The10TableWidth-20;
if(the11DivWidth>30)
{
the01Div.style.width=the11DivWidth;
the11Div.style.width=the11DivWidth;
}

}</script><body onresize=changeDivHeight()>
<br>
<font color=red>JK认为此效果华而不实，使用后会给其它的编码带来麻烦，强烈建议慎用</font><br><br>用的时候需要注意的主要有：<br>
1.几个div的ID，以及table的ID，JK已将他们写死在程序里<br>
2.请定义行高(在本demo中，为“<font color=blue>height=22</font>”<br>
3.重点注意几个div的onscroll事件<br>
4.在实际使用中，将按钮的事件赋给body.onload即可<br>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=1%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div><div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22 >
<td nowrap bgcolor="#66CCFF" >Thank you!</td>
<td nowrap bgcolor="#66CCFF" >You are welcome!</td>
</tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr></table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div><div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap bgcolor="#66CCFF" >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap bgcolor="#66CCFF" >I am fine! I am fine! I am fine! I am fine! </td>
</tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr></table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>

JK_10000(JK)兄,对你的感激之情真是不知如何表达啊,我弄这东东弄得我头都要炸了,非常感激!!!
接分吧
在ASP版中,这个帖子是我发的
这个滚动控制怎么控制?（cql0007） http://expert.csdn.net/Expert/TopicView1.asp?id=1913242
你也去接分吧非常非常感谢!
若在使用过程中再遇问题,还要来请教请教老兄的啊,呵呵.

调试易

高分相求,高难度滚动条控制问题(分不够再加)

解决方案 »