日期:2014-05-16  浏览次数:20463 次

表格列宽可变demo
工作需要,研究了一下表格列宽可变的js例子,先在网上找了一下现成的,发现更多的没有封装好,浏览器兼容性也不好。综合网上各demo例子进行了一下汇总,使用jQuery解决了浏览器兼容性问题,重新对类进行了设计,实现了较好的封装性。
代码如下:
JScript code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style>
.resizeDivClass
{
position:absolute;
background-color:gray;
width:2px;
height:15px;
z-index:1px;
display: block;
cursor:e-resize
}
.td1 {

font-size: 12px;
white-space:nowrap;
color:#0000ff;  
}
</style>
<script language=javascript>
/*
    标题:扩拖拽列表格demo 1.2
    设计:卢松强
    博客:http://hi.csdn.net/andensy
    日期:2010年4月26日
    说明:修改了firfox兼容性问题,可以很好的兼容火狐浏览器
    */
    /*
    依赖于jQuery
    */
(function($){
    //用正则表达式判断jQuery的版本
    if (/1\.(0|1|2)\.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
     alert('movedTh 需要 jQuery v1.2.6 以后版本支持!  你正使用的是 v' + $.fn.jquery);
    return;
    }
    me=null;
    var ps=3;
    $.fn.movedTh=function(){
        me=this;
        var target = null;
        var tempStr = "";
        var i=0;
        $(me).find("tr:first").find("th").each(function(){
        tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
            var div={};
            $(this).html($(this).html()+tempStr);
            var offset = $(this).offset();
            var pos=offset.left +$(this).width()+ me.offset().left-ps;
            $("#mydiv"+i).addClass("resizeDivClass");
            $("#mydiv"+i).css("left",pos);
            $("#mydiv"+i).css("top",(offset.top+2));
            i++;
        });    //end each
    }    //end moveTh
    $.fn.mousedone={
        movedown:function(e,obj){
            var d=document;
            var e = window.event||e ;
            var myX = e.clientX||e.pageX;
                obj.mouseDownX=myX ;
                obj.pareneTdW=$(obj).parent().width();    //obj.parentElement.offsetWidth;
                obj.pareneTableW=me.width();
                if(obj.setCapture){
                    obj.setCapture();
                }else if(window.captureEvents){ 
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
                }
            d.onmousemove=function(e){
                var dragData=obj;
                var event = window.event||e ;
                if(!dragData.mouseDownX) return false;
                var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;
                    if(newWidth>0)
                    {
                        $(obj).parent().width(newWidth);
                        me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);
                        var k=0;
                        me.find("tr:first").find("th").each(function(){
                        var offset = $(this).offset();
                        var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;
                        $("#mydiv"+k).css("left",pos);
                        k++;
                        })    //end each
                    }//end if
            };
            d.onmouseup=function(e){
                var dragData=obj;
                    if(dragData.setCapture)
                    {
                        dragData.releaseCapture();
                    }else if(window.captureEvents){
                    window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);
                    }
                    dragData.mouseDownX=0;
            }
        }
    }    //end mousedone
    $(window).resize(function(){
        setTimeout(function() { 
        var target = null;
        var t