table 自由拉伸

外層div的樣式:
div{
      position:absolute;
      overflow:auto;     
      scrollbar-face-color:9999ff;     
      height:expression((document.body.clientHeight-this.offsetTop-15>this.children[0].offsetHeight)?(this.children[0].offsetHeight+15):(document.body.clientHeight-this.offsetTop-15));     
      width:expression(document.body.clientWidth-15);
}
內層table的第一行的樣式:
fixedheadtr{
   position:absolute;     
   top:expression(this.offsetParent.scrollTop); 
   background-color:navy;
   cursor:hand;
   height:32px;
}
table的style="behavior:url(grid.htc)"
grid.htc:
// 描述         : 網格
// 版本         : 1.0
// 作者         : 寶玉 http://www.nwpubbs.net
// 最新更新   : 2003-5-21
// 備註         :李森與2010年稍作修改以適應程序
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready"   ONEVENT="fnInit()"   />
<PUBLIC:ATTACH EVENT="onclick"   ONEVENT="fnClick()"   />
<METHOD NAME="menubarpush"/>
<SCRIPT LANGUAGE="JScript">
function fnInit()
{
   element.border = 0;
   element.cellSpacing = 0;
   element.cellPadding = 0;
   element.style.tableLayout = "fixed";   
   element.style.borderLeft="1px solid ThreeDDarkShadow";
   element.style.borderTop="1px solid ThreeDDarkShadow";
   element.style.borderRight="1px solid black";
   element.style.borderBottom="1px solid black";   
   for(var i=0;i<element.rows.length;i++)
   {
    var _tr = element.rows[i];
    for(var j=0;j<_tr.cells.length;j++)
    {
     var _td = _tr.cells(j);
     _td.noWrap = true;
     if(i==0)
     {
      var _div = window.document.createElement("div");
      _div.style.borderLeft = "1px solid ButtonHighlight";
      _div.style.borderTop = "1px solid ButtonHighlight";
      _div.style.borderRight = "1px solid ButtonShadow";
      _div.style.borderBottom = "1px solid ButtonShadow";           
      _div.style.width = "100%";
      _div.style.height = "100%";
      _div.style.lineHeight = "25px";
      _div.style.color = "white";
      _div.style.backgroundColor = "navy";
      _div.innerHTML = _td.innerHTML;
      _td.innerHTML = "";
      _td.appendChild(_div);
      _td.style.borderRight = "1px solid black";
      _td.style.borderBottom = "1px solid black";
      _td.align = "center";
      _td.vAlign = "middle";     
      _tr.attachEvent("onmousedown", fnMousedown);
      _tr.attachEvent("onmousemove",fnMousemove);
      _tr.attachEvent("onmouseover",fnMouseover);
      _tr.attachEvent("onselectstart",fnCancel);
      window.document.attachEvent("onmouseup", fnMouseup);
      window.document.attachEvent("onmousemove",fnMouseMove);
     }     
    }    
   }
   var _line = window.document.createElement("DIV");
   _line.style.position = "absolute";   
   _line.style.backgroundColor="#000000";
   _line.style.width=1.5;
   window.document.body.appendChild(_line);
   element.splitLine = _line;
   element.splitLine.style.display = "none";
    }
function fnMouseover()
{
   return;
}
function fnMouseMove(){
   if(!element.splitlocked) return;
   var oEl = event.srcElement;
   oEl.style.cursor = "col-resize";
   fnMousemove(); 
}
function fnMousemove(){
   var oEl = event.srcElement;   
   element.splitLine.style.left = window.event.x;
   element.splitLine.style.top = getTop(element);
   element.splitLine.style.height = element.parentElement.clientHeight;
   if(element.splitlocked) return;
   if(!IfSplitLocation(oEl)) return;
}
function fnClick(){
   var oEl = event.srcElement;
}
function fnMousedown(){
   var oEl = event.srcElement;
   oEl.style.cursor = "default";
   if(!IfSplitLocation(oEl)) return;
   element.splitLine.style.display = "";
   element.splitlocked = true;
   window.document.attachEvent("onselectstart",fnCancel);
}
function fnMouseup()
{
   var oEl = event.srcElement;
   oEl.style.cursor = "default";
   element.splitLine.style.display = "none";
   element.splitlocked = false;   
   if(element.curResizeTD == null) return;
   var otd = element.curResizeTD;
   var otdLeft = getLeft(otd);
   var otdwidth = element.splitLine.style.pixelLeft - otdLeft
   if(otdwidth < 0) return;
   otd.style.width = otdwidth;
   window.document.detachEvent("onselectstart",fnCancel);
}
function IfSplitLocation(oEl)
{
   if(oEl.tagName == "DIV")
    oEl = oEl.parentElement;
   if(oEl.tagName == "TD")
   {
    if(Math.abs(event.offsetX - oEl.clientWidth) <= 5)
    {
     element.curResizeTD = oEl;     
    }
    else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0){
     if(oEl.cellIndex>0){
      element.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);      
     }
    }
    else{
     element.curResizeTD = null;
     element.style.cursor='default';
     return false;
    }
   }
   oEl.style.cursor = "col-resize";
   return true;
}
function getTop(e){
   var t=e.offsetTop;
   while(e=e.offsetParent){
    t+=e.offsetTop;
    }
   return t;
}
function getLeft(e){
   var l=e.offsetLeft;
   while(e=e.offsetParent){
    l+=e.offsetLeft;
    }
   return l;
}
/*****************************************************
禁止拖動
*****************************************************/
    function fnCancel()
    {
      window.event.returnValue = false;
   return false;
}
   </SCRIPT>
</PUBLIC:COMPONENT>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章