java web可以拖動表格單元格大小的html，鼠標拖動改變表格大小（四）

效果圖：拖動帶顏色的框，可以上下左右拖動表格寬度

特點：拖動容易，上下左右框都可拖動

代碼：

Html代碼

<table　cellspacing=0 id=mytable　cellpadding=0 border=0 style="position:absolute;left:50;top:50;width:100;height:100;">
<tr>
<td　colspan=3　height=2　bgcolor=blue></td>
</tr>
<tr>
<td　bgcolor=blue　width=2></td>
<td>
<table　width=100%　height=100%>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td　bgcolor=blue　width=2　style="cursor:w-resize"　 id="wresize"></td>
</tr>
<tr>
<td　colspan=2　bgcolor=blue　height=2　id="nresize"　 style="cursor:n-resize"></td>
<td　bgcolor=blue　height=2　style="cursor:nw-resize"　 id="nwresize"></td>
</tr>
</tr>
</table>
<script　language=javascript>
resizing=false;
resizeto=null;
buttonevent=null;

function　resizestart()
{
　　 buttonevent=event.srcElement;
　　 if((buttonevent.id=="nwresize")||(buttonevent.id=="wresize")|| (buttonevent.id=="nresize"))
　　 {
　　　 if(buttonevent.id=="nwresize")resizeto="nw";
　　　 if(buttonevent.id=="nresize")resizeto="n";
　　　 if(buttonevent.id=="wresize")resizeto="w";
　　　 resizing=true;
　　　 dragx=event.x-mytable.offsetWidth;
　　　 dragy=event.y-mytable.offsetHeight;
　　　 buttonevent.setCapture();
　　 }
}

function　resize()
{
　　 if(resizing)
　　　　 {
　　　　 if((resizeto=="w")||(resizeto=="nw")) mytable.style.pixelWidth=event.clientX-dragx;
　　　　 if((resizeto=="n")||(resizeto=="nw")) mytable.style.pixelHeight=event.clientY-dragy;
　　　　 }
}

function　resizeend()
{
　　 resizing=false;
　　 buttonevent.releaseCapture();
}

document.onmousedown=resizestart;
document.onmousemove=resize;
document.onmouseup=resizeend;
</script>