java web可以拖动表格单元格大小的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>

 

黑色头发  http://heisetoufa.iteye.com