100分求通过鼠标拖动改变表格各列的宽度的代码

[touzi]

效果跟SQL的表格一样,可以通过鼠标拖动改变表格各列的宽度


求这样的代码

[若白师妹]

web很难做

[lwd10000]

SF没了。。继续看下边。

[skycuilin]

我发个宝玉的作品上来吧．两个文件．grid.htc和index.htm
// 描述 : 网格
// 版本 : 1.0
// 作者 : 宝玉 http://www.nwpubbs.net
// 最新更新 : 2003-5-21
// 备注 :

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="fnClick()" />
<METHOD NAME="menubarpush"/>
<SCRIPT LANGUAGE="JScript">
// window.onerror = function fnNoOp() {return true; };
// globals
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.backgroundColor = "ButtonFace";
_div.style.width = "100%";
_div.style.height = "100%";
_div.innerHTML = _td.innerHTML;
_td.innerHTML = "";
_td.appendChild(_div);
_td.style.borderRight = "1px solid black";
_td.style.borderBottom = "1px solid black";
_td.align = "center";
/**/
_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";
}
}
_td = _tr.insertCell(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.backgroundColor = "ButtonFace";
_div.style.width = "100%";
_div.style.height = "100%";
_div.innerHTML = "  ";
_td.appendChild(_div);
_td.style.borderRight = "1px solid black";
_td.style.borderBottom = "1px solid black";
}
var _line = window.document.createElement("DIV");
_line.style.position = "absolute";
_line.style.backgroundColor="#000000";
_line.style.width=1;
window.document.body.appendChild(_line);
element.splitLine = _line;
element.splitLine.style.display = "none";
}
function fnMouseover()
{
return;
}
function fnMouseMove(){
if(!element.splitlocked) return;
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;
if(!IfSplitLocation(oEl)) return;
element.splitLine.style.display = "";
element.splitlocked = true;
window.document.attachEvent("onselectstart",fnCancel);
}
function fnMouseup()
{
element.splitLine.style.display = "none";
element.splitlocked = false;
element.document.body.style.cursor='default';
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;
element.document.body.style.cursor='col-resize';
}
else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0){
if(oEl.cellIndex>0){
element.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);
element.document.body.style.cursor='col-resize';
}
}
else{
element.curResizeTD = null;
element.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;
}
</SCRIPT>
</PUBLIC:COMPONENT>

[skycuilin]

上面忘记写名字了，楼上的存为grid.htc就行了，这个是index.htm



<div style="height:500">
<TABLE border=1 cellspacing=0 cellpadding=0 style="behavior:url(grid.htc);">
<TR>
<TD> title1中国</TD>
<TD> title2</TD>
<TD> title3</TD>
<TD> title4</TD>
</TR>
<TR>
<TD> content11</TD>
<TD> content12</TD>
<TD> content13</TD>
<TD> content14</TD>
</TR>
<TR>
<TD> content21</TD>
<TD> content22</TD>
<TD> content23</TD>
<TD> content24</TD>
</TR>
<TR>
<TD> content31</TD>
<TD> content32</TD>
<TD> content33</TD>
<TD> content34</TD>
</TR>
</TABLE>
</div>

[巡山小校]

一切皆有可能。。

[realjoshzuo]

收藏!!

[AVAmyZ]

mark