JQuery拖动表头边框线调整表格列宽效果代码
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己动手尝试实现，在此分享下小小的成果。
首先需要如图所示的鼠标图标文件，在自己的硬盘中搜索*.cur，肯定能找到。
为了能在所有需要该效果的页面使用，并且不需要更改页面任何HTML，我把所有的代码整合在$(document).ready(function(){});中，并写入一个独立的JS文件。
用一个1像素宽的DIV来模拟一条竖线，在页面载入后添加到body元素中
$(document).ready(function(){
$("body").append("<divid=\"line\"style=\"width:1px;height:200px;border-left:1pxsolid#00000000;position:absolute;display:none\"></div>");
});
接下来是鼠标移动到表格纵向边框上鼠标变型的问题，起初我考虑在表头中添加一个很小的块级元素触发mousemove和mouseout事件，但为了简单起见，我还是选择为整个表头添加该事件。
在TH的mousemove事件中处理鼠标变型：
$("th").bind("mousemove",function(event){
varth=$(this);
//不给第一列和最后一列添加效果
if(th.prevAll().length<=1||th.nextAll().length<1){
return;
}
varleft=th.offset().left;
//距离表头边框线左右4像素才触发效果
if(event.clientX-left<4||(th.width()-(event.clientX-left))<4){
th.css({'cursor':'/web/Page/frameset/images/splith.cur'});
//修改为你的鼠标图标路径
}
else{
th.css({'cursor':'default'});
}
});
当鼠标按下时，显示竖线，并设置它的高度，位置CSS属性，同时记录当前要改变列宽的TH对象，因为一条边框线由两个TH共享，这里总是取前一个TH对象。
$("th").bind("mousedown",function(event){
varth=$(this);
//与mousemove函数中同样的判断
if(th.prevAll().length<1|th.nextAll().length<1){
return;
}
varpos=th.offset();
if(event.clientX-pos.left<4||(th.width()-(event.clientX-pos.left))<4){
varheight=th.parent().parent().height();
vartop=pos.top;
$("#line").css({"height":height,"top":top,"left":event.clientX,"display":""});
//全局变量，代表当前是否处于调整列宽状态
lineMove=true;
//总是取前一个TH对象
if(event.clientX-pos.left<th.width()/2){
currTh=th.prev();
}
else{
currTh=th;
}
}
});
接下来是鼠标移动时，竖线随之移动的效果，因为需要当鼠标离开TH元素也要能有该效果，该效果写在BODY元素的mousemove函数中
$("body").bind("mousemove",function(event){
if(lineMove==true){
$("#line").css({"left":event.clientX}).show();
}
});
最后是鼠标弹起时，最后的调整列宽效果。这里我给BODY和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数，但不明白为什么鼠标在TH中时，事件没有触发，我只好给TH元素也添加了代码。水平有限，下面完全重复的代码不知道怎么抽出来。
$("body").bind("mouseup",function(event){
if(lineMove==true){
$("#line").hide();
lineMove=false;
varpos=currTh.offset();
varindex=currTh.prevAll().length;
currTh.width(event.clientX-pos.left);
currTh.parent().parent().find("tr").each(function(){
$(this).children().eq(index).width(event.clientX-pos.left);
});
}
});
$("th").bind("mouseup",function(event){
if(lineMove==true){
$("#line").hide();
lineMove=false;
varpos=currTh.offset();
varindex=currTh.prevAll().length;
currTh.width(event.clientX-pos.left);
currTh.parent().parent().find("tr").each(function(){
$(this).children().eq(index).width(event.clientX-pos.left);
});
}
});
好了，只要在需要这个效果的页面中引入包含以上代码的JS文件，就可以为页面中表格添加该效果。
另外以上代码在火狐中自定义鼠标图标的代码没出效果，所用的jquery为1.2.6
效果文件下载
————————————————————————更新——————————————
关于拖动时会选中内容的BUG，将以下一行代码添加到$(document).ready函数里就行了
$("body").bind("selectstart",function(){return!lineMove;});