Java Web can drag table cell size HTML, drag the mouse to change the size of the table (iv)

Effect diagram: Drag a colored box to drag the table width up or down

Features: Drag easy, up and down the left and right boxes can be dragged

Code:

HTML code

<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 2 id= "Nresize" style= "Cursor:n-resize" ></TD>
<td bgcolor=blue height=2 style= "Cursor:nw-resize" 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>