table问题续

<script>
var rowNum = 20;
var colNum = 9;
// Array that holds the columns width
var arrTDwidth = new Array (77, 31, 71, 113, 52, 53, 41, 64, 55, 90, 
70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 
30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 
70, 180, 12, 90, 70);
function drawTab (rows, cols, color, id)
{
sHTML = "<TABLE id='"+id+"' bgcolor='"+color+"' border=1 style='tableLayout:fixed'>";
count=0;
sHTML += "\n<THEAD id='downTblHead'>\n";
i=0;
for (var j=0; j < cols; j++)
{
width = arrTDwidth;
sHTML += "<TH id='a0"+j+"' nowrap style='word-wrap: break-word;'>这是: Row"+i+"Col"+j+"</TH>";
//sHTML += "<TH id='a0"+j+"' nowrap style='word-wrap: break-word;' style='width:"+arrTDwidth[count]+"pt;'>这是: Row"+i+"Col"+j+"</TH>";
count++;
}
count = 0;
sHTML += "\n</THEAD>\n";
sHTML += "\n<TBODY>\n";
for (var i=1; i<rows; i++)
{
sHTML += "\n<TR>\n";

for (var j=0; j<cols; j++)
{
width = arrTDwidth;
sHTML += "<TD id='a"+i+j+"' style='width:150;'>这是: Row"+i+"Col"+j+"</TD>";
//sHTML += "<TD id='a"+i+j+"' style='word-wrap: break-word;' nowrap style='word-wrap: break-word;' style='width:"+arrTDwidth[count]+"pt;'>这是: Row"+i+"Col"+j+"</TD>";
count++;
}
count = 0
sHTML += "\n</TR>\n";
} sHTML += "\n</TBODY>\n";
sHTML += "\n</TABLE>"; return sHTML;

}function cloneHeader ()
{
var x = document.all['downTblHead'].cloneNode(true);
for (var j = 0; j < colNum; j++)
{
document.all['a0'+j].id = 'head'+j;
}
document.all['downTblHead'].id = "downTblHead4hidden";
document.all['upTbl'].appendChild(x);
document.all['upTbl'].width = document.all['downTblHead4hidden'].offsetWidth;
synchronizeHeader ()
}function synchronizeHeader ()
{
var ok = true;
var max = 0;
while (ok && max < 20)
{
max++;
ok = false;
for (var j = 0; j < colNum; j++)
{
if (document.all['a0'+j].offsetWidth != document.all['head'+j].offsetWidth)
{
ok = true;
document.all['a0'+j].style.width = document.all['head'+j].offsetWidth;
}
}
}}function getScrollBraWidth ()
{
try
{
var elem = document.createElement("DIV");
elem.id = "asdf";
elem.style.width = 100;
elem.style.height = 100;
elem.style.overflow = "scroll";
elem.style.position = "absolute";
elem.style.visibility = "hidden";
elem.style.top = "0";
elem.style.left = "0";
document.body.appendChild (elem);
scrollWidth = document.all['asdf'].offsetWidth - document.all['asdf'].clientWidth;
document.body.removeChild (elem);
delete elem;
}
catch (ex)
{
return false;
} return scrollWidth;
}function findPosX (obj)
{
var curleft = 0;
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
return curleft;
}</script><body bgcolor="#000000", text="#ffffff" onLoad="cloneHeader ();"><div id="headerContainer" style="position: absolute; z-index:2;">
<TABLE  id='upTbl' bgcolor='gray' border=1 style="tableLayout:fixed">
</TABLE>
</div><div id="dataContainer" style="height:300;overflow:scroll; z-index:1; position: absolute;" >
<script language="JavaScript">
<!--
document.write(drawTab(rowNum, colNum, "", "data"));
document.all['dataContainer'].style.width = document.all['data'].offsetWidth + getScrollBraWidth ();
document.all['headerContainer'].style.width = document.all['data'].offsetWidth;
//-->
</script>
</div></body>
</html>

解决方案 »

  1.   

    如果用户用的是IE，可以考虑使用MSFlexGrid控件
    <object classid="clsid:6262D3A0-531B-11CF-91F6-C2863C385E30" id="Grid1"
    width="291" height="151">
      <param name="Rows" value="10">
      <param name="Cols" value="8">
      <param name="AllowUserResizing" value="1">
      <!-- 0 none 1 col 2 row 3 both-->
      <param name="FixedRows" value="1">
      <param name="FixedCols" value="0">
     </object>
    </p>
    <script>
    n=0;
    try{
     n=Grid1.Version;
    }
    catch(e){
     alert("您没有安装MSFlexGrid控件，某些数据无法正常显示");
    }
    if(n>="600") initGrid();
    //initGrid();
    function initGrid(){
    with (Grid1){
     for(var i=0;i< Cols; i++){
      Row = 0;
      Col = i;
      Text = "第" + i + "列";
      for(var j=1; j< Rows; j++){
       Col= i;
       Row = j;
       Text = Row + " . " + Col; 
      }
     }
    } 
    }
    </script>