表格拖动问题　急！！谢谢

拖懂列是怎么回事？你是想通过列拖懂table吗？

解决方案 »

  1.   

    是改变每个列的大小，表格并不动，就是每个输出的列值都有长短，要一行的字段多的话，表格又不想超出页面大小，有些值就看不完全了，这时我可以拖动列线，使别的列短点，要看的列长点，就和Excel里表格一样，我已经实现了，就是不太灵活，而且易出错，请高手指点一个好的方法，最好有源代码，请给出三行三列以上就行。（有很多两列可以实现，多列就不行了）谢谢。
      

  2.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><SCRIPT LANGUAGE="JavaScript">
    <!--
         function topBar(){
            this.colcount=document.all.table1.children[0].children[0].children.length;
        this.html='';
    this.items=new Array;
      
           this.create=create;
       this.getObj=getObj;
       this.refresh=refresh;
     }
    function create(){
        for(i=0;i<this.colcount;i++){
    var obj=document.all.table1.children[0].children[0].children[i];
            this.items[i]=new Array();
    this.items[i].w=obj.clientWidth;
    this.items[i].x=i==0?2:(this.items[i-1].x+this.items[i-1].w+2);
    this.html+='\n<div id="item_'+i+'" style="position:absolute;left:'+this.items[i].x+'px;top:2px;width:'+this.items[i].w+'px;height:20px;background-color:#e7e7e7;"></div>';
    if(i<(this.colcount-1))this.html+='\n<div id="resizer_'+i+'" style="position:absolute;left:'+(this.items[i].w+this.items[i].x)+'px;top:2px;width:2px;height:20px;background-color:black;cursor :e-resize" ></div>';
    }
    }
    function getObj(){
        for(i=0;i<this.colcount;i++){
       this.items[i].item=new makeLayer('item_'+i);
       if(i<(this.colcount-1))this.items[i].resizer=new makeLayer('resizer_'+i);
       
     }
    }
    function refresh(){
       for(i=0;i<this.colcount;i++){
       var obj=document.all.table1.children[0].children[0].children[i];
        this.items[i].w=obj.clientWidth;
    this.items[i].x=i==0?2:(this.items[i-1].x+this.items[i-1].w+2);
    this.items[i].item.css.width=this.items[i].w;
    this.items[i].item.css.left=this.items[i].x;
            if(i<(this.colcount-1))this.items[i].resizer.css.left=this.items[i].x+this.items[i].w;
    }
    }
    //-------- drag -------
    var dragObj=null;
    var dragID=null;
    function mDown(id){
       if(window.event.srcElement.id.indexOf('resizer_')!=-1)dragObj=window.event.srcElement;
       else return false;
       dragID=dragObj.id.replace(/\w+\_(\d*)/,'$1');
    }
    function mMove(){
       if(!dragObj||!dragID) return false;
       try{
          var objl=document.all.table1.children[0].children[0].children[dragID];
      var objr=document.all.table1.children[0].children[0].children[dragID+1];
      var dw=window.event.x-window.event.offsetX-dragObj.parentElement.offsetLeft-objl.clientWidth;
      objl.style.width=objl.clientWidth+dw;
      objr.style.width=objr.clientWidth-dw;
     //  obj.style.width=window.event.x-window.event.offsetX-dragObj.parentElement.offsetLeft;
          topbar.refresh()
    }
    catch(x){}
    }
    function mUp(){
       dragObj=null;
       dragID=null;
       return false;}
    function makeLayer(idStr) {
        this.obj=document.all[idStr];
    this.css=this.obj.style;
    this.x =document.all[idStr].offsetLeft
    this.y =document.all[idStr].offsetTop;
    return (this);
    }
    function go(){
       topbar=new topBar();
       topbar.create();
       document.all.bar.innerHTML=topbar.html
       document.all.bar.style.width=document.all.table1.width;
       document.all.bar.style.left=document.all.table1.style.left;
       document.all.bar.style.top=document.all.table1.offsetTop-22;
      //alert(1);
       topbar.getObj();
    }
           document.onmousedown = mDown
       document.onmousemove = mMove
       document.onmouseup = mUp;
    //-->
    </SCRIPT>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    <div id=bar style="position:absolute;height:22px;width:500px;background-color:black;top:2px;left:2px;over-flow:hidden;"></div>
    <BR><BR><BR><BR>
    <table id=table1 width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
      <tr> 
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr> 
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td>&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
    </table>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    go()
    //-->
    </SCRIPT>
    </body>
    </html>
      

  3.   

    <style>
    .tabletitle {
    background: buttonface;
    font: icon;
    color: buttontext;
    table-layout: fixed;
    background: threedhighlight;
    border-top:1px solid threedshadow;
    border-right: 1px solid threedshadow;
    }.tabletitleTD {
    background: buttonface;
    overflow:hidden;
    height:15;
    border-left:1px solid buttonhighlight;
    border-right:1px solid buttonshadow;
    border-top:1px solid buttonhighlight;
    border-bottom:1px solid buttonshadow;
    }
    .tableAct {
    background: buttonface;
    font: icon;
    color: buttontext;
    table-layout: fixed;
    border-right: 1px solid threedshadow;
    }
    .tableAct TD{
    border-left: 1px solid buttonshadow;
    }
    .tdwbar{
    cursor:w-resize;
    background:buttonface;
    behavior:url(dragline.htc);
    }
    </style>
    <TABLE class="tabletitle" cellSpacing="0" cellPadding="0" border="0" >
    <TR>
    <TD width="100" class="tabletitleTD" id="d1">标题1</TD>
    <TD width="1" class="tdwbar" onDragend="t1.width=d1.width;t2.width=d2.width"></TD>
    <TD width="100" class="tabletitleTD" id="d2">标题2</TD>
    <TD width="1" class="tdwbar" onDragend="t2.width=d2.width;t3.width=d3.width"></TD>
    <TD width="100" class="tabletitleTD" id="d3">标题3</TD>
    <TD width="1" class="tdwbar" onDragend="t3.width=d3.width;t4.width=d4.width"></TD>
    <TD width="100" class="tabletitleTD" id="d4">标题4</TD>
    <TD width="1" class="tdwbar" onDragend="t4.width=d4.width"></TD>
    <TD width="5" class="tabletitleTD">　</TD>
    </TR>
    </TABLE>
    <TABLE class="tableAct" cellSpacing="0" cellPadding="0" border="1" >
    <TBODY>
    <TR>
    <TD width="100" id="t1">ballack</TD>
    <TD width="100" id="t2">ballack</TD>
    <TD width="100" id="t3">ballack</TD>
    <TD width="100" id="t4">ballack</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="8">　</TD>
    </TR>
    </TBODY>
    </TABLE>
      

  4.   

    <style>
    .tabletitle {
    background: buttonface;
    font: icon;
    color: buttontext;
    table-layout: fixed;
    background: threedhighlight;
    border-top:1px solid threedshadow;
    border-right: 1px solid threedshadow;
    }.tabletitleTD {
    background: buttonface;
    overflow:hidden;
    height:15;
    border-left:1px solid buttonhighlight;
    border-right:1px solid buttonshadow;
    border-top:1px solid buttonhighlight;
    border-bottom:1px solid buttonshadow;
    }
    .tableAct {
    background: buttonface;
    font: icon;
    color: buttontext;
    table-layout: fixed;
    border-right: 1px solid threedshadow;
    }
    .tableAct TD{
    border-left: 1px solid buttonshadow;
    }
    .tdwbar{
    cursor:w-resize;
    background:buttonface;
    behavior:url(dragline.htc);
    }
    </style>
    <TABLE class="tabletitle" cellSpacing="0" cellPadding="0" border="0" >
    <TR>
    <TD width="100" class="tabletitleTD" id="d1">标题1</TD>
    <TD width="1" class="tdwbar" onDragend="t1.width=d1.width;t2.width=d2.width"></TD>
    <TD width="100" class="tabletitleTD" id="d2">标题2</TD>
    <TD width="1" class="tdwbar" onDragend="t2.width=d2.width;t3.width=d3.width"></TD>
    <TD width="100" class="tabletitleTD" id="d3">标题3</TD>
    <TD width="1" class="tdwbar" onDragend="t3.width=d3.width;t4.width=d4.width"></TD>
    <TD width="100" class="tabletitleTD" id="d4">标题4</TD>
    <TD width="1" class="tdwbar" onDragend="t4.width=d4.width"></TD>
    <TD width="5" class="tabletitleTD">　</TD>
    </TR>
    </TABLE>
    <TABLE class="tableAct" cellSpacing="0" cellPadding="0" border="1" >
    <TBODY>
    <TR>
    <TD width="100" id="t1">ballack</TD>
    <TD width="100" id="t2">ballack</TD>
    <TD width="100" id="t3">ballack</TD>
    <TD width="100" id="t4">ballack</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="100">kahn</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="100">ziege</TD>
    <TD width="8">　</TD>
    </TR>
    <TR>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="100">klose</TD>
    <TD width="8">　</TD>
    </TR>
    </TBODY>
    </TABLE>
      

  5.   

    seabell(百合心)的好漂亮！！！
    先说声对不起，让你久等了，昨晚和哥们喝酒去了，今天一上班就在写，你看看，很不理想，主要是table的width&height太难控制，总是不听话，每个td之间的关系无法独立控制，很麻烦，主要是对table不熟悉，我马上就改正一些严重的问题，我很希望全部使用div，其实也可以达到table的效果，而且更以控制，你也看看，我先改,
      

  6.   

    seabell(百合心)的好漂亮！！！
    先说声对不起，让你久等了，昨晚和哥们喝酒去了，今天一上班就在写，你看看，很不理想，主要是table的width&height太难控制，总是不听话，每个td之间的关系无法独立控制，很麻烦，主要是对table不熟悉，我马上就改正一些严重的问题，我很希望全部使用div，其实也可以达到table的效果，而且更以控制，你也看看，我先改,
      

  7.   

    谢谢。可是最后一列，为什么拖动的时候下表格会减少？能不能不让它最后一列就是TABLE的right线成固定值，不让它随表格变动，谢谢，解决后立给分。