jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小:
在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小。
也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码。
代码实例如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>毛票票</title> <styletype="text/css"> table{ border-collapse:collapse; } td{ text-align:center; } </style> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <scripttype="text/javascript"> (function($){ $.fn.tableresize=function(){ var_document=$("body"); $(this).each(function(){ if(!$.tableresize){ $.tableresize={}; } var_table=$(this); //设定ID varid=_table.attr("id")||"tableresize_"+(Math.random()*100000).toFixed(0).toString(); vartr=_table.find("tr").first(),ths=tr.children(),_firstth=ths.first(); //设定临时变量存放对象 varcobjs=$.tableresize[id]={}; cobjs._currentObj=null,cobjs._currentLeft=null; ths.mousemove(function(e){ var_this=$(this); varleft=_this.offset().left, top=_this.offset().top, width=_this.width(), height=_this.height(), right=left+width, bottom=top+height, clientX=e.clientX, clientY=e.clientY; varleftside=!_firstth.is(_this)&&Math.abs(left-clientX)<=5, rightside=Math.abs(right-clientX)<=5; if(cobjs._currentLeft||clientY>top&&clientY<bottom&&(leftside||rightside)){ _document.css("cursor","e-resize"); if(!cobjs._currentLeft){ if(leftside){ cobjs._currentObj=_this.prev(); } else{ cobjs._currentObj=_this; } } } else{ cobjs._currentObj=null; } }); ths.mouseout(function(e){ if(!cobjs._currentLeft){ cobjs._currentObj=null; _document.css("cursor","auto"); } }); _document.mousedown(function(e){ if(cobjs._currentObj){ cobjs._currentLeft=e.clientX; } else{ cobjs._currentLeft=null; } }); _document.mouseup(function(e){ if(cobjs._currentLeft){ cobjs._currentObj.width(cobjs._currentObj.width()+(e.clientX-cobjs._currentLeft)); } cobjs._currentObj=null; cobjs._currentLeft=null; _document.css("cursor","auto"); }); }); }; })(jQuery); $(document).ready(function(){ $("table").tableresize(); }); </script> </head> <body> <tablecellspacing="0"border="1"rules="all"> <tbody> <tr> <tdstyle="width:200px;">ID</td> <tdstyle="width:200px;">名字</td> <tdstyle="width:200px;">年纪</td> <tdstyle="width:200px;">地址</td> <tdstyle="width:200px;">电话</td> </tr> <tr> <td>22</td> <td>Name:44</td> <td>Age:23</td> <td>Address:47</td> <td>Phone:15</td> </tr> <tr> <td>28</td> <td>Name:42</td> <td>Age:68</td> <td>Address:30</td> <td>Phone:50</td> </tr> <tr> <td>29</td> <td>Name:63</td> <td>Age:48</td> <td>Address:90</td> <td>Phone:76</td> </tr> </tbody> </table> </body> </html>