表格的单元格的宽度与高度可不可以做到自由拖动来改变？

关注
怎么用onmousemove来做
我看到别人有那么做的

解决方案 »

  1.   

    其实很简单
    <table border id="tab" onmousemove="test()">
    <tr>
    <td>a1</td>
    <td>a2</td>
    <td>a3</td>
    <td>a4</td>
    </tr>
    <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    </tr>
    </table><script>
    x = -1;
    y = -1;function test() {
      el = tab;//event.srcElement;
      if(! event.button) {
        x = -1;
        return;
      }
      if(x<0) {
        x = event.x;
        y = event.y;
      }else {
        el.width = el.offsetWidth + event.x - x;
        el.height = el.offsetHeight + event.y - y ;
      }
    }
    </script>
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>emu's resize table code</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var startx=0;
    var mousePress=false;
    var destElm;
    var oldWidth=40;
    function down()
    {
    startx = event.x;
    mousePress=true;
    with (event.srcElement)
    destElm = parentNode.cells[cellIndex-1]
    oldWidth = destElm.offsetWidth;
    }
    function up()
    {
    mousePress=false;
    }
    function move()
    {
    if (!mousePress) return;
    var d=event.x-startx+oldWidth;
    if (d>0) destElm.width=d;
    }
    //-->
    </SCRIPT>
    <style>
    .left {border-left:1px solid black}
    .top {border-top:1px solid black}
    .left-top {border-top:1px solid black;border-left:1px solid black}
    TABLE{border:1px solid black}
    </style>
    </head>
    <body onmousemove=move() onmouseup=up()>
    <table>
    <tr>
    <td>abcd</td><td style="cursor:e-resize;" onmousedown=down()></td>
    <td class=left>abcd</td><td style="cursor:e-resize" onmousedown=down()></td>
    <td class=left>abcd</td><td style="cursor:e-resize" onmousedown=down()></td>
    <td class=left>abcd</td><td style="cursor:e-resize" onmousedown=down()></td>
    </tr>
    <tr>
    <td colspan=2 class=top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    </tr>
    <tr>
    <td colspan=2 class=top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    <td colspan=2 class=left-top>hello</td>
    </tr>
    </table></body>
    </html>