可改变宽度的表格

原创 2007年09月26日 16:06:00
 
<!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">
            
&nbsp;
            
<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">
                            
<!--Main-->
                             
<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>
                            
<!--EndMain--></TABLE>
                    
</TD>
                
</tr>
            
</TABLE>
        
</form>
    
</body>
</HTML>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox

table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 .bg { font-size:12p...

鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox

table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 .bg { font-size:12p...

鼠标调整表格的宽度

  • 2015-08-03 14:20
  • 10KB
  • 下载

LaTeX技巧015:设置表格的宽度和高度

前言LaTeX的表格默认只是包裹内容,但是有时候我们需要指定表格的宽度或高度,即每一列的宽度,实现效果如下:效果展示 实现代码%system = ubuntu %software = TexLi...

鼠标拖动调整表格宽度

jQuery拖动调整表格列宽度-resizableColumns

jQuery拖动调整表格列宽度-resizableColumns 实现鼠标可拖动调整表格列宽度
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)