将下面代码复制到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;
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;
本想把它加工成行高也可自动调整的,无奈水平有限。。。。