难题,clientWidth的问题

DataTB是根据程序自动生成的,它里面的内容可能会把table撑开,DataTB的border为1
所以如果对齐的话这三个table重叠起来后格子不会乱,线会非常齐.
=============================================================================
可以通过--列数*CLIENTWIDTH+（列数+1）* border,求出topTB的WIDTH然后：<table width=求得的值 border=1>
<tr>
'循环开始
<td width=clientwidth></td>
'循环结束
</tr>
</table>

解决方案 »

  1.   

    lions911(勇攀高峰) :不行啊,我试了,给每个td赋了width值后,它的clientWidth值会自动变.高手,快出现吧.
      

  2.   

    自己模拟的终归有限制, 可不可以考虑使用系统的 listview 控件呢?
      

  3.   

    孟子大哥,你给的table是非常标准的table.这种table是很容易对齐的,还有你没给div定宽度,这样它会无限制的撑开,而不影响clientWidth.但你那个同步的方法值得我好好学学.
        我试试先.
      

  4.   

    不行啊:
    我给每个td的width赋值后,每次比较时它自动回原了.这样导致在同步时每次同步都白干了.
    我等会儿把代码整理整理贴上来,希望大家都来讨论.
      

  5.   

    我搞这段代码有两天多了,已经没什么思路了,大家都来看看吧,发表发表意见.http://www.sarp.com.cn/taolun.htm
      

  6.   

    这有一段代码,实现的功能和你的是一样的,但是只用了一个table，你看对你有帮助没？？
    <html>
    <head>
    <META http-equiv=Content-Type content="text/html; charset=GBK">
    <script language="JavaScript">
    <!--
    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;
    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;
    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;
    document.all('LeftTar').style.pixelTop= -parDiv.scrollTop;
    } //-->
    </script></script>
    </head>
    <div style="MARGIN: 2pt; OVERFLOW: scroll;width:160px;height:150px;">
    <table id="tbl" border=0 cellspacing="1" cellpadding="0" bgcolor=#660000>
    <tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
    <tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
    </table>
    </div>
    <script language="javascript">
    LockTable(tbl,1,1,1);
    </script>
      

  7.   

    kisslan() 谢谢了,我琢磨琢磨先
      

  8.   

    kisslan():不行.我看了你的代码,功能挺强大的.但当td里面的内容不规范时,就不行了,比如某一个td的内容特别长,或者是特别高.
      

  9.   

    用offsetWidth
    和overflow : hide
    当内容特别长,或者是特别高，都隐藏
      

  10.   

    用offsetWidth不行.我来谈谈我的心得:
    不齐的原因是因为dataTable的td过多或某个td的内容过宽过高导致.到客户端后,ie会自动调整table的高宽以适应需求.所以先设的width,height基本没用.
    我的解决方法:(有一点点误差)
    因为我的报表所有的输入框会是一模一样的,所以把原先的两个浮动table改为三个浮动table:
    topTable,topLeftTable,leftTable,我先算出topLeftTable的宽度,也就是topTable的左端显示位置,同理得出leftTable.style.top
    topTable我可以平均分配(topTable的最后一行一定等于填报的输入框数),leftTable我也可以平均分配.
    这样误差有一点,但误差可以接受.
    特别奇怪的是当给定一个table的宽度后,给每个td宽度时,td的宽度它会自动调整,但table的总宽度不会变.
    我实在不想搞这个问题了,等有时间再说吧,这两天如果没人答贴,我下星期来结贴.
    谢谢楼上的兄弟们.