随意改变table的大小
适用于chrome,firefox和ie8，其它版本未知?
定义一个3X3的表格，最中间的那个单元格存放内容，其余的单元格用来做改变大小的手柄
(function($){$.fn.TableResizer = function(handles) { if(!handles) handles = "0123456789"; this.each(function() { var tab = $(this); $.each(tab.find(">tbody>tr>td"), function(i){ var handle = parseInt(handles.charAt(i)); if(handle==4) return; $(this).mousedown(function(e){ var mouseDownX=e.clientX, mouseDownY=e.clientY; var oPlaceholder = $("<div style='filter:alpha(opacity=0);opacity:0;z-index:1;background-color:red;" +"width:5px;height:5px;position:absolute;margin:0;padding:0;cursor:"+$(this).css("cursor") +";left:"+(e.clientX-2)+"px;top:"+(e.clientY-2)+"px'/>").appendTo("body"); var originWidth = tab.width(), originHeight = tab.height(), originPos = tab.position(); var fOnMove = function(e) { if(!mouseDownX) return; oPlaceholder.css({left:e.clientX-2, top:e.clientY-2}); var deltaX = e.clientX - mouseDownX, deltaY = e.clientY - mouseDownY, idx = handle; if(idx==0) tab.css({left:originPos.left+deltaX, width:originWidth-deltaX, top:originPos.top+deltaY, height:originHeight-deltaY}); else if(idx==1) tab.css({top:originPos.top+deltaY, height:originHeight-deltaY}); else if(idx==2) tab.css({width:originWidth+deltaX, top:originPos.top+deltaY, height:originHeight-deltaY}); else if(idx==3) tab.css({left:originPos.left+deltaX, width:originWidth-deltaX}); else if(idx==5) tab.width(originWidth+deltaX); else if(idx==6) tab.css({left:originPos.left+deltaX, width:originWidth-deltaX, height:originHeight+deltaY}); else if(idx==7) tab.height(originHeight+deltaY); else tab.css({width:originWidth+deltaX, height:originHeight+deltaY}); return false; } var fOnUp = function() { mouseDownX = null; $(this).unbind("mousemove", fOnMove).unbind("mouseup", fOnUp); oPlaceholder.remove(); } $(document).mousemove(fOnMove).mouseup(fOnUp); return false; }) }) }) return this;}})(jQuery)?使用的例子:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="jquery.js"></script><script src="jq.table.resizer.js"></script><script>$(function(){ $("#t1").TableResizer();});</script></head><body><table id="t1" style="position:absolute;left:10px;top:50px;border-spacing:0px;border-spacing:expression(this.cellSpacing=0);width:100px" border="0"><tr style="height:2px"><td style="background-color:blue;width:2px;cursor:nw-resize"></td><td style="background-color:pink;cursor:n-resize"></td><td style="background-color:blue;width:2px;cursor:ne-resize"></td></tr><tr><td style="background-color:pink;cursor:w-resize"></td><td style="background-color:yellow">Line1Line2</td><td style="background-color:pink;cursor:e-resize"></td></tr><tr style="height:2px"><td style="background-color:blue;cursor:sw-resize"></td><td style="background-color:pink;cursor:s-resize"></td><td style="background-color:blue;cursor:se-resize"></td></tr></table></body></html>?