怎么实现table 动态拉升列

类似excel 可以直接拉长或缩短

解决方案 »

  1.   

    你复制， 运行下，看看<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> 
    <title>table</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <style type="text/css">
    .bg table{
        font-size:12px;
        color:#000000;
    }
    .bg td{
        font-size:12px;
        color:#000000;
        text-align:left;
        line-height:15px;
        height:20px;
    }
    .bg td.tit{
        background-color:#e2e2e2;
        color:#000;
        height:17px;
        text-align:center;
        line-height:15px;
    }
    .bg td.num{
        background-color:#e2e2e2;
        color:#000;
        text-align:right;
        line-height:15px;
        width:30px;
        height:22px;
    }
    .resizeDivClass{
       text-align:right;
       width:1px;
       margin:0px 0 0px 0;
       background:#fff;
       border:0px;
       float:right;
       cursor:e-resize;
    } 
    </style>
     
    <script language="javascript">
        function mousedown(obj){    //鼠标按下
            setTableLayoutToFixed(); 
            obj.mouseDownX=event.clientX; //获取鼠标X坐标
            obj.pareneTdW= obj.parentNode.offsetWidth; 
            obj.pareneTableW=theObjTable.offsetWidth;//offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变        obj.setCapture(); 
        } 
        function mousemove(obj){    //鼠标移动
            if(!obj.mouseDownX) return false; 
            var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 
            if(newWidth>10) 
            { 
            var theObjTable = document.getElementById("theObjTable");
            obj.parentElement.style.width = newWidth; 
            theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 
            
            
            
            } 
        } 
        function mouseup(obj){  //鼠标放开
            obj.releaseCapture();   //释放函数
            obj.mouseDownX=0; 
        } 
        function setTableLayoutToFixed() //函数
        { 
         var theObjTable = document.getElementById("theObjTable");
         if(theObjTable.style.tableLayout=='fixed') return; 
           var headerTr=theObjTable.rows[0]; 
            for(var i=0;i<headerTr.cells.length;i++) 
            { 
            headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; 
            } 
             
            for(var i=0;i<headerTr.cells.length;i++) 
            { 
            headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; 
            } 
            theObjTable.style.tableLayout='fixed'; 
        } 
        </script> 
        <script language="javascript"><!--
        function theObjTable(o,a,b,c){
            var t=document.getElementById(o).getElementsByTagName("tr");
            for(var i=0;i<t.length;i++){
                t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
                t[i].onclick=function(){
                    if(this.x!="1"){
                    }else{
                        this.x="0";
                        this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
                    }
                }
                t[i].onmouseover=function(){
                    if(this.x!="1")this.style.backgroundColor=c;
                }
                t[i].onmouseout=function(){
                    if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
                }
            }
        }
    --></script>
    <body>
    <table width="100%"  class="bg" border="1" cellspacing="0" bordercolorlight="#7b7b7b"  bordercolordark="#efefef" id="theObjTable" > 
           <tr> 
                <td class="num" >序号</td> 
                <td width="100px" class="tit" > 
                <span class="resizeDivClass" onmousedown="mousedown(this);" onMouseMove="mousemove(this);" onMouseUp="mouseup(this);"><img src="../images/box1.gif"  width="3" height="18" /></span>  
                公司名称  
                </td> 
                <td class="tit"> 
                <span class="resizeDivClass" onmousedown="mousedown(this);" onMouseMove="mousemove(this);" onMouseUp="mouseup(this);"><img src="../images/box1.gif" width="3" height="18" /></span>  
                订单客户 
                </td> 
                <td class="tit"> 
                <span class="resizeDivClass" onmousedown="mousedown(this);" onMouseMove="mousemove(this);" onMouseUp="mouseup(this);"><img src="../images/box1.gif" width="3" height="18" /></span>  
                部门  
                </td> 
                <td class="tit"> 
                <span class="resizeDivClass" onmousedown="mousedown(this);" onMouseMove="mousemove(this);" onMouseUp="mouseup(this);"><img src="../images/box1.gif" width="3" height="18" /></span>  
                业务员 
                </td> 
                <td class="tit"> 
                <span class="resizeDivClass" onmousedown="mousedown(this);" onMouseMove="mousemove(this);" onMouseUp="mouseup(this);"><img src="../images/box1.gif" width="3" height="18" /></span>  
                交款方式 
                </td> 
          </tr> 
          <tr> 
               <td  class="num">1</td> 
               <td >中国电信</td> 
               <td >订单客户名称</td> 
               <td >广告部</td> 
               <td >王天一</td> 
               <td >现金</td> 
          </tr > 
          <tr> 
               <td class="num">2</td> 
               <td >中国电信</td> 
               <td >订单客户名称</td> 
               <td >广告部</td> 
               <td >王天一</td> 
               <td >现金</td> 
          </tr> 
          <tr> 
               <td class="num">3</td> 
               <td >中国电信</td> 
               <td >订单客户名称</td> 
               <td >广告部</td> 
               <td >王天一</td> 
               <td >现金</td> 
          </tr> 
          <tr> 
               <td class="num">4</td> 
               <td >中国电信</td> 
               <td >订单客户名称</td> 
               <td >广告部</td> 
               <td >王天一</td> 
               <td >现金</td> 
          </tr> 
          <tr> 
               <td class="num">5</td> 
               <td >中国电信</td> 
               <td >订单客户名称</td> 
               <td >广告部</td> 
               <td >王天一</td> 
               <td >现金</td> 
          </tr > 
    </table> 
    <script language="javascript"><!--
    //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
    theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2");
    --></script>
    </body> 
    </html> 
      

  2.   

    1楼在IE里可以，在FIREFOX里不行