让HTML表格的边框可以拽动

HTML中的Table的单元格是不能够通过鼠标拽动而改变大小的，如果想实现如同word中的表格一样可以通过鼠标拽动，就需要自己写函数了。可以通过两种方法来实现，一是直接写网页脚本，二是写htc扩展table的行为。我这里采用了htc扩展table行为的方法来实现它，好处是脚本代码的封装和引用都很方便。

下面是一个实现了基本功能的htc：

splitCellTable.htc：

<PUBLIC:COMPONENT ID=_SplitCellTable_Htc Name="SplitCellTable">
<PUBLIC:PROPERTY NAME="version" VALUE="split cell table behavior 1.0" />
<PUBLIC:PROPERTY NAME="author" VALUE="menghonbo" />

<PUBLIC:METHOD NAME="SplitTo" INTERNALNAME="_SplitTo"/>

<PUBLIC:EVENT NAME="onSpliting" ID="eventSpliting" />
<PUBLIC:EVENT NAME="onSplited" ID="eventSplited" />

<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="on_initia()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE=javascript>
<!--
var marginSize = 5;
var status = 0;
var direction = 0;
var crtEleY = 0;
var crtEleX = 0;

function on_initia(){
var _dragBorder = document.createElement("<div style='DISPLAY: none; FILTER: alpha( opacity=20 );POSITION: absolute;BACKGROUND-COLOR: black;overflow:hidden;'>");
this.dragBorder = _dragBorder
window.document.body.insertAdjacentElement("beforeEnd",_dragBorder);
this.attachEvent("onmousemove",on_transMouse);
this.attachEvent("onmouseout",on_mouseOut);
}

function on_transMouse(){
this.style.cursor = "default";
window.document.detachEvent("onmousemove",on_beginSplit);
if(event.srcElement){
if(event.srcElement.tagName=="TD"){
crtObj = event.srcElement;
if(event.offsetX < marginSize){
this.style.cursor = "e-resize";
direction = 1;
if(crtObj.previousSibling)crtObj = crtObj.previousSibling;
}
if(event.offsetY < marginSize){
this.style.cursor = "n-resize";
direction=2;
crtObj = crtObj.parentNode.previousSibling;
}
if(event.offsetX > (event.srcElement.offsetWidth - marginSize)){
this.style.cursor = "e-resize";
direction = 1;
}
if(event.offsetY > (event.srcElement.offsetHeight - marginSize)){
this.style.cursor = "n-resize";
direction=2;
}
window.document.attachEvent("onmousedown",on_beginSplit);
status = 1;
}
}
}
function on_mouseOut(){
window.document.detachEvent("onmousedown",on_beginSplit);
}
function on_beginSplit(){
if(status!=1)return false;
dragBorderShow();
this.detachEvent("onmousemove",on_transMouse);
window.document.attachEvent("onmousemove",dragMove);
window.document.attachEvent("onscroll",dragMove);
window.document.attachEvent("onmousemove",dragCheckState);
window.document.attachEvent("onselectstart",dragSelect);
window.document.attachEvent("onmouseup",fire_eventSplited);
status = 2;
}

function dragBorderShow(){
this.dragBorder.zIndex = 199;
if(direction==1){
this.dragBorder.style.height = window.document.body.offsetHeight - 10;
this.dragBorder.style.width = 2;
this.dragBorder.style.top = 2;
this.dragBorder.style.left = event.clientX;
}else if(direction==2){
this.dragBorder.style.height = 2;
this.dragBorder.style.width = window.document.body.offsetWidth - 25;
this.dragBorder.style.top = event.clientY;
this.dragBorder.style.left = 2;
}
this.dragBorder.style.display = "block";
crtEleY = event.clientY;
crtEleX = event.clientX;
}
function dragHide(){
this.dragBorder.style.display = "none";
this.dragBorder.style.height = "";
this.dragBorder.style.top = "";
this.dragBorder.style.left = "";
this.dragBorder.style.width = "";
this.dragBorder.zIndex = "";
}
function dragCheckState(){if(event.button != 1 )fire_eventSplited();}
function dragSelect(){return false;}
function dragMove(){
if(event.button != 1){fire_eventSplited();return;}
if(direction==2){
this.dragBorder.style.top = event.clientY + window.document.body.scrollTop;
if(event.clientY > window.document.body.clientHeight - 10 )window.scrollBy(0, 10);
else if(event.clientY < 10){
window.scrollBy(event.clientX, -10);
}
}else{
this.dragBorder.style.left = event.clientX + window.document.body.scrollLeft;
if(event.clientX > window.document.body.clientWidth - 10 )window.scrollBy(10,0);
else if(event.clientX < 10){
window.scrollBy(-10, event.clientY);
}
}
fire_eventSpliting();
}

function fire_eventSpliting(){
var oEvent = document.createEventObject();
if(direction==2)oEvent.scrollNum = event.clientY - crtEleY;
else oEvent.scrollNum = event.clientX - crtEleX;
eventSpliting.fire(oEvent);
}
function fire_eventSplited(){
dragHide();
var oEvent = document.createEventObject();
if(direction==2){
this.style.pixelHeight = this.clientHeight + (event.clientY - crtEleY);
crtObj.style.pixelHeight = crtObj.clientHeight + (event.clientY - crtEleY);
oEvent.scrollNum = event.clientY - crtEleY;
}else{
this.style.pixelWidth = this.clientWidth + (event.clientX - crtEleX);
crtObj.style.pixelWidth = crtObj.clientWidth + (event.clientX - crtEleX)
oEvent.scrollNum = event.clientX - crtEleX;
}
window.document.detachEvent("onmousemove",dragMove);
window.document.detachEvent("onscroll",dragMove);
window.document.detachEvent("onmousemove",dragCheckState);
window.document.detachEvent("onmouseup",fire_eventSplited);
window.document.detachEvent("onselectstart",dragSelect);
this.attachEvent("onmousemove",on_transMouse);
status = 0;
eventSplited.fire(oEvent);
}
//-->
</SCRIPT>

在HTML的table中引用它

<TABLE id="myTable" cellSpacing=0 cellPadding=3 width="90%" border=1 style="behavior:url('splitCellTable.htc')">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR></TABLE>