可拖动的表格

最新推荐文章于 2024-07-29 17:39:57 发布

lvzi98

最新推荐文章于 2024-07-29 17:39:57 发布

阅读量853

点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="gb2312" />
<title ></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
.TableView{ margin:0 auto;table-layout:fixed; border:#CCC solid 1px; line-height:23px; text-align:center;
            border-collapse:collapse;width:100%;}
.TableView th{ border:#CCC solid 1px;background:url('../images/datagrid_title_bg.png') repeat-x;}
.TableView td{ border:#CCC solid 1px;}
    .TableView td,.TableView th{height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;text-align:center;font-size:12px;}
</style>

<script type="text/javascript">
    /*
    标题：扩拖拽列表格demo 1.2
    设计：卢松强

    博客：http://hi.youkuaiyun.com/andensy
    日期：2010年4月26日
    说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
    */
    /*
    依赖于jQuery
    部分修改：谭海生 QQ：420822072
    */
    (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).children("table").css("margin-left", "0");
            var target = null;
            var tempStr = "";
            var i = 0;

            $(me).find("tr:first").find("th").each(function() {
                tempStr = '<div id="mydiv' + i + '"οnmοusedοwn="$().mousedone.movedown(event,this)" style="position:absolute;width:20px;height:25px;z-index:99px;cursor:e-resize;overflow:hidden;" ></div>';
                var div = {};
                $(this).html($(this).html() + tempStr);
                var divOffset = $(this).parent().offset();
                var offset = $(this).offset();
                var pos = offset.left + $(this).width() + 6 - divOffset.left;
                $("#mydiv" + i).css("left", pos - 10).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 divOffset = $(this).parent().offset();
                            var offset = $(this).offset();
                            var pos = offset.left + $(this).width() + 6 - divOffset.left;
                            $("#mydiv" + k).css("left", pos - 10);
                            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 tempStr = "";
                    var i = 0;
                    $(me).find("tr:first").find("th").each(function() {
                        tempStr = '<div id="mydiv' + i + '"οnmοusedοwn="$().mousedone.movedown(event,this)"  ></div>';
                        var div = {};
                        $(this).html($(this).html() + tempStr);
                        var divOffset = $(this).parent().offset();
                        var offset = $(this).offset();
                        var pos = offset.left + $(this).width() - (2 + divOffset.left);
                        $("#mydiv" + i).addClass("resizeDivClass");
                        $("#mydiv" + i).css("left", pos);
                        i++;
                    });    //end each
                }, 10);
            });
        })(jQuery)
</script>
<script type="text/javascript">
    $().ready(function() {
        $("#div1").movedTh();
    });
</script>
</head>
<body>
    <div id="div1">
    <table class="TableView" >
        <tr>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
        </tr>

        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
    </table>
    </div>
</body>
</html>