谁能给一个可以动态调整table的列的宽度的例子啊?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ChangeWidth</title>
<script language="javascript" type="text/javascript">
function ChangeWidth()
{
var temp = document.all.td2.width;
document.all.td2.width = document.all.td1.width;
document.all.td1.width = temp;
}
</script>
</head><body>
<table border="1">
  <tr>
    <td id="td1" bgcolor="#FF0000" width="200px">&nbsp;</td>
    <td id="td2" bgcolor="#0000FF" width="100px">&nbsp;</td>
  </tr>
</table>
<p>
  <input type="submit" name="Submit" value="Button" onClick="ChangeWidth();">
</p>
</body>
</html>保存为HTML文件试试看吧!

解决方案 »

  1.   

    这样的？
    http://blog.never-online.net/uploads/200608/21_022921_spliter.htmlhttp://blog.never-online.net/article.asp?id=84
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title> neverSpliter - http://www.never-online.net </title>
     <meta http-equiv="ImageToolbar" content="no" />
     <meta name="author" content="never-online, BlueDestiny"/>
     <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/>
     <meta name="description" content="javascript reference, c sharp artilces"/>
     <meta name="creator.name" content="never-online, BlueDestiny" />
     <style type="text/css" media="all" title="Default">
     body, td { font:9pt "Verdana"; }
     table { border:4px solid buttonface; }
     .innerSpliter { width:4px; height:100%; border:1px outset buttonhighlight; background-color:buttonface; overflow:hidden; cursor:col-resize; }
     .spliterLine { display:none; top:0px; left:100px; position:absolute; border:2px outset button; }
     </style>
     <script type="text/javascript">
     //<![CDATA[
     function getElementOffset(e)
     {
     var t = e.offsetTop;
     var l = e.offsetLeft;
     var w = e.offsetWidth;
     var h = e.offsetHeight-1; while(e=e.offsetParent) {
     t+=e.offsetTop;
     l+=e.offsetLeft;
     }
     return {
     top : t,
     left : l,
     width : w,
     height : h
     }
     }
     window.onload = function()
     {
     window.lftWrapper = document.getElementById("leftWrapper");
     window.rgtWrapper = document.getElementById("rightWrapper");
     window.splitObj = document.getElementById("splitLine");
     window.bIsMoved = false; document.getElementById("spliter").onmousedown = handlerDown;
     document.onmousemove = handlerMove;
     document.onmouseup = handlerUp;
     } function handlerDown()
     {
     var elposition = getElementOffset(document.getElementById("spliter"));
     splitObj.evtX = event.clientX;
     with (splitObj.style)
     {
     display = "block";
     left = elposition.left;
     cursor = "col-resize";
     filter = "alpha(opacity=100)";
     height = elposition.height;
     top = elposition.top;
     }
     bIsMoved = true;
     } function handlerMove()
     {
     if (!bIsMoved) return;
     splitObj.setCapture();
     with (splitObj.style)
     {
     left = event.clientX ;
     cursor = "col-resize";
     }
     } function handlerUp()
     {
     if (!bIsMoved) return;
     lftWrapper.style.width = event.clientX;
     bIsMoved=false;
     splitObj.releaseCapture();
     splitObj.style.display = "none";
     } //]]>
     </script>
     </head> <body id="www.never-online.net">
     <div id="splitLine" class="spliterLine"></div>
     <table cellspacing="0" cellpadding="0" border="0" id="mainWrapper" width="100%" height="500">
     <tr>
     <td width="20%" id="leftWrapper" class="borderTop" valign="top">
     I am never-online
     </td>
     <td id="spliter" title="drag this line to control leftframe width" width="5" style="overflow:hidden">
     <div class="innerSpliter"></div>
     </td>
     <td id="rightWrapper" class="borderTop" valign="top">
     or BlueDestiny, click here to my <a href="http://blog.never-online.net">blog</a>
     </td>
     </tr>
     </table>
     <p align="center"> Power By never-online </p>
     </body>
    </html>
      

  3.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>
    .resizeDivClass
    {
    position:relative;
    background-color:red;
    width:2;
    z-index:1;
    left:expression(this.parentElement.offsetWidth-1);
    cursor:e-resize;}
    </style><script language=javascript>function MouseDownToResize(obj){
    obj.mouseDownX=event.clientX;
    obj.pareneTdW=obj.parentElement.offsetWidth;
    obj.pareneTableW=theObjTable.offsetWidth;
    obj.setCapture();
    }
    function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
    obj.parentElement.style.width = newWidth;
    theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
    }
    }
    function MouseUpToResize(obj){
    obj.releaseCapture();
    obj.mouseDownX=0;
    }</script>
    </head><body>改变table的列宽度<table id=theObjTable STYLE="table-layout:fixed" >
    <tr bgcolor=cccccc >
    <td valign=top >
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    改变table的列宽度</td>
    <td valign=top >
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    改变table的列宽度</td>
    <td valign=top >
    <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
    改变table的列宽度</td>
    </tr><tr>
    <td>改变table的列宽度</td><td>改变table的列宽度</td><td>改变table的列宽度</td>
    </tr>
    </table>
    </body>
    </html>
      

  4.   

    http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f58
      

  5.   

    <html><head>
    <style>
    .resizeDivClass
    {
    position:relative;
    background-color:blue;
    width:2;
    left:expression(this.parentElement.offsetWidth-1);
    cursor:e-resize;
    }
    </style><script language=javascript>function MouseDownToResize(obj){
    obj.mouseDownX=event.clientX;
    obj.pareneTdW=obj.parentElement.offsetWidth;
    obj.pareneTableW=theObjTable.offsetWidth;
    obj.setCapture();
    }
    function MouseMoveToResize(obj){
    if(!obj.mouseDownX){
    return false;
    }
    var incWidth = event.clientX - obj.mouseDownX;
    var newWidth = obj.pareneTdW + incWidth;
    if(newWidth>0){
    obj.parentElement.style.width = newWidth;
    theObjTable.style.width=obj.pareneTableW + incWidth;
    }
    }function MouseUpToResize(obj){
    obj.releaseCapture();
    obj.mouseDownX=0;
    alert('width:'+obj.parentElement.style.width+',index:'+obj.parentElement.index);
    }</script>
    </head><body><table id=theObjTable style="width:600px">
    <tr>
    <td index=0>
    <div style="float:left;" class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    <td index=1>
    <div style="float:left;" class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    <td index=2>
    <div style="float:left;" class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    </tr></table>
    </body>
    </html>
      

  6.   

    <html><head>
    <script language=javascript>
    EchoTable = function() { };EchoTable.mouseDownToResize = function(obj){
    obj.mouseDownX=event.clientX;
    obj.pareneTdW=obj.parentElement.offsetWidth;
    obj.pareneTableW=theObjTable.offsetWidth;
    obj.setCapture();
    }
    EchoTable.mouseMoveToResize = function(obj){
    if(!obj.mouseDownX){
    return false;
    }
    var incWidth = event.clientX - obj.mouseDownX;
    var newWidth = obj.pareneTdW + incWidth;
    if(newWidth>0){
    obj.parentElement.style.width = newWidth;
    theObjTable.style.width=obj.pareneTableW + incWidth;
    }
    }EchoTable.mouseUpToResize = function(obj){
    obj.releaseCapture();
    obj.mouseDownX=0;
    alert('width:'+obj.parentElement.style.width+',index:'+obj.parentElement.index);
    }</script>
    </head><body><table id=theObjTable style="width:600px">
    <tr>
    <td index=0>
    <div style="float:left;position:relative;background-color:blue;width:2;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;"  onmousedown="EchoTable.mouseDownToResize(this);" onmousemove="EchoTable.mouseMoveToResize(this);" onmouseup="EchoTable.mouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    <td index=1>
    <div style="float:left;position:relative;background-color:blue;width:2;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="EchoTable.mouseDownToResize(this);" onmousemove="EchoTable.mouseMoveToResize(this);" onmouseup="EchoTable.mouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    <td index=2>
    <div style="float:left;position:relative;background-color:blue;width:2;left:expression(this.parentElement.offsetWidth-1);cursor:e-resize;" onmousedown="EchoTable.mouseDownToResize(this);" onmousemove="EchoTable.mouseMoveToResize(this);" onmouseup="EchoTable.mouseUpToResize(this);"></div>
    <div>
    改变table的列宽度
    </div>
    </td>
    </tr></table>
    </body>
    </html>