表格拖动调整列宽JQuery代码(1/2)

表格拖动调整列宽jquery代码
为了能在所有需要该效果的页面使用，并且不需要更改页面任何html，我把所有的代码整合在  $(document).ready(function() {});  中，并写入一个独立的js文件。
用一个1像素宽的div来模拟一条竖线，在页面载入后添加到body元素中

$(document).ready(function() {
     $("body").append("<div id="line" style="width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none" ></div> ");
 });

接下来是鼠标移动到表格纵向边框上鼠标变型的问题，起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseo教程ut事件，但为了简单起见，我还是选择为整个表头添加该事件。

　　在th的mousemove事件中处理鼠标变型
$("th").bind("mousemove", function(event) {
    var th = $(this);
    //不给第一列和最后一列添加效果
    if (th.prevall().length <= 1 || th.nextall().length < 1) {
        return;
    }
    var left = 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) {
    var th = $(this);
   //与mousemove函数中同样的判断
    if (th.prevall().length < 1 | th.nextall().length < 1) {
        return;
    }
    var pos = th.offset();
    if (event.clientx - pos.left < 4 || (th.width() - (event.clientx - pos.left)) < 4) {
        var height = th.parent().parent().height();
        var top = 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;
        }
    }
});

首页 1 2 末页