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>