JS实现可拖拽宽度表格

将下面代码复制到body之后，可变宽度的表格id设为tbContent即可

var  tbContent = document.getElementById( " tbContent " );
function  fnInit()
... {
  for(var i=0;i<tbContent.rows.length;i++)
  ...{
   var _tr = tbContent.rows[i];
   for(var j=0;j<_tr.cells.length;j++)
   ...{
    var _td = _tr.cells(j);
    _td.noWrap = true;
    if(i==0)
    ...{    
     _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);
    }
    else...{
     _td.style.borderRight = "1px solid #C0C0C0";
     _td.style.borderBottom = "1px solid #C0C0C0";
    }
   }
  
  
  }
  var _line = window.document.createElement("DIV");
  _line.style.position = "absolute";
  _line.style.backgroundColor="#000000";
  _line.style.width=1;
  window.document.body.appendChild(_line);
  tbContent.splitLine = _line;
  tbContent.splitLine.style.display = "none";
}

function  fnMouseover()
... {
 return;
}

function  fnMouseMove() ... {
 if(!tbContent.splitlocked) return;
 fnMousemove();  
}

function  fnMousemove() ... {
 var oEl = event.srcElement;
 tbContent.splitLine.style.left = window.event.x;
 tbContent.splitLine.style.top = getTop(tbContent);
 tbContent.splitLine.style.height = tbContent.parentElement.clientHeight;
 if(tbContent.splitlocked) return;
 if(!IfSplitLocation(oEl)) return;
}

function  fnClick() ... {
 var oEl = event.srcElement;
}

function  fnMousedown() ... {
 var oEl = event.srcElement;
 if(!IfSplitLocation(oEl)) return;
 tbContent.splitLine.style.display = "";
 tbContent.splitlocked  = true;
 window.document.attachEvent("onselectstart",fnCancel);
}

function  fnMouseup()
... {
 tbContent.splitLine.style.display = "none";
 tbContent.splitlocked  = false;
 tbContent.document.body.style.cursor='default';
 if(tbContent.curResizeTD == null) return;
 var otd = tbContent.curResizeTD;
 var otdLeft = getLeft(otd);
 var otdwidth =  tbContent.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)
  ...{
   tbContent.curResizeTD = oEl;
   tbContent.document.body.style.cursor='col-resize';
  }
  else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0)...{
   if(oEl.cellIndex>0)...{
    tbContent.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);
    tbContent.document.body.style.cursor='col-resize';
   }
  }
  else...{
   tbContent.curResizeTD = null;
   tbContent.document.body.style.cursor='default';
   return false;
  }
 }
 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;
}
window.onload = fnInit; 

 本想把它加工成行高也可自动调整的，无奈水平有限。。。。