可调整宽度的表格-优快云博客

本文链接：https://blog.youkuaiyun.com/dadou2007/article/details/1801764

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>可改变宽度的table</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
         <SCRIPT>
            //记录鼠标状态, 记录鼠标按下, 记录当前列
            var curState, curDown, curCol;
            var oldPlace, newPlace;

            function getTable(item) {
            var obj = null;
            do {
            if (item.tagName=="TABLE") {
            obj = item;
            break;
            }
            item = item.offsetParent;
            }
            while (item != null);
            return obj;
            }

            function calculateOffset(item, offsetName) {
            var totalOffset = 0;
            do {
            totalOffset += eval('item.offset' + offsetName);
            item = item.offsetParent;
            }
            while (item != null);
            return totalOffset;
            }

            function moveCol(objCol) {
            window.status = window.document.body.scrollLeft;
            if (!curDown) {
            //curCol = objCol;
            ///鼠标没有按下
            if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth - 3
                &&  window.event.x + window.document.body.scrollLeft  < calculateOffset(objCol, "Left") + objCol.offsetWidth       )
             {
                //移动到了相应的部位/改变鼠标
                curState=true;
                window.document.body.style.cursor = "w-resize";
            }
            else
            {
                curState = false;
                window.document.body.style.cursor = "default";
            }
            curCol = objCol;
            }
            }

            function  upBody()
            {
             if (curState)
             {
                    //调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
                    //并且左边不会占到整个的一半宽度
                    newPlace = window.event.x + window.document.body.scrollLeft;
                    if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20
                           )
                    {
                        if (curCol.width > oldPlace - newPlace)
                            curCol.width -= oldPlace - newPlace;
                        var curTable = getTable(curCol);
                        //    if (curTable!=null)
                        //curTable.width -= oldPlace - newPlace;

                        window.document.all.tdright.style.width = 750 - curCol.width ;

                    }
                    //-------------------------------------------------------------
                    curState = false;
                    curDown = false;
                    myDiv.style.display = "none";
                    window.document.body.style.cursor = "default";
                }
            }

            function downBody()
            {
                //鼠标按下
                if (curState)
                {
                    curDown = true;
                    var curTable = getTable(window.event.srcElement);
                    if (curTable!=null)
                    {
                        //---------定位竖线----------
                        myDiv.style.display = ""; //层可见
                        myLine.style.height = curTable.offsetHeight;
                        myLine.style.width = 1;
                        myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
                        myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop;
                        //---------------------------
                        oldPlace = window.event.x + window.document.body.scrollLeft;
                    }
                }
            }

            function moveBody()
            {
                //鼠标移动
                if (curDown)
                {
                    //鼠标按下状态
                    myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
                    window.document.body.style.cursor = "w-resize";
                }
            }

            function selectBody() {
            //鼠标选择文本[不支持动态调整？]
            if (curDown) //鼠标按下于调整状态
            window.event.returnValue = false;
            }

        </SCRIPT>

    </HEAD>
    <body onmouseup="upBody()" onselectstart="selectBody()" onmousedown="downBody()" onmouseover="moveBody()"
        bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">
        <DIV id="myDiv" style="DISPLAY: none; Z-INDEX: 1; LEFT: 12px; WIDTH: 0px; POSITION: absolute; TOP: 50px; HEIGHT: 100%">
            <HR id="myLine" width="1" color="black" noShade SIZE="200">
        </DIV>
        <form name="Form1" method="post" action="FileShareBrowse.aspx?FileShareID=9b00cf00-ec2d-4aa5-a45a-0f1f3dcf1fb3"
            id="Form1">
             
            <TABLE style="FONT-SIZE: 9pt" height="100%" cellSpacing="0" cellPadding="0" width="100%"
                border="0" ID="Table1">
                <tr>
                    <td>
                    <TD vAlign="top">
                        <TABLE style="BORDER-RIGHT: #4f91b1 1px solid; BORDER-TOP: #4f91b1 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #4f91b1 1px solid; BORDER-BOTTOM: #4f91b1 1px solid"
                            height="100%" cellSpacing="0" cellPadding="0" width="500" border="0" ID="Table10">
                            
                             <tr>
                                             <td onmousemove="moveCol(this)" id="tdleft" vAlign="top" width="120" height="100%">
                                                                 左
                                                            </td>
                                                            <TD id="tdright" vAlign="top" width="590" style=" BORDER-LEFT: #3d88ad 2px double" height="100%" bgcolor="yellow">
                                                                 右
                                                            </TD>
                                                        </tr>
                            </TABLE>
                    </TD>
                </tr>
            </TABLE>
        </form>
    </body>
</HTML>