如果拖动 改变 tables 中 td 的宽度！！

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript">
var currentResizeTdObj=null;
function MouseDownToResize(event,obj){
  obj=obj||this;
  event=event||window.event;
  currentResizeTdObj=obj;
  obj.mouseDownX=event.clientX;
  obj.mouseDownY=event.clientY;
  obj.tdW=obj.offsetWidth;
  obj.tdH=obj.offsetHeight;
  if(obj.setCapture) obj.setCapture();
  else event.preventDefault();
}
function MouseMoveToResize(event){
  if(!currentResizeTdObj) return ;
  var obj=currentResizeTdObj;
  event=event||window.event;
    if(!obj.mouseDownX) return false;
    if(obj.parentNode.rowIndex==0) {
      var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
      if(newWidth>0) obj.style.width = newWidth;
    else obj.style.width =1;
  }
  if(obj.cellIndex==0){
      var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
      if(newHeight>0) obj.style.height = newHeight;
    else obj.style.height =1;
  }
}
function MouseUpToResize(){
  if(!currentResizeTdObj) return;
  if (currentResizeTdObj.releaseCapture) currentResizeTdObj.releaseCapture();
  currentResizeTdObj=null;
}
//改变表格行列宽函数
function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
{
  if(!needChangeWidth && !needChangeHeight) return;
  var oTh=table.rows[0];
  if(needChangeWidth){
    for(var i=0;i<oTh.cells.length;i++)   {
       var cell=oTh.cells[i];
       cell.style.cursor="e-resize";
       cell.style.width=cell.offsetWidth;
       cell.onmousedown =MouseDownToResize;
    }
  }
  if(needChangeHeight){
    for(var j=0;j<table.rows.length;j++)   {
       var cell=table.rows[j].cells[0];
       cell.style.cursor="s-resize";
       cell.onmousedown =MouseDownToResize;
    }
  }
  if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor="se-resize";
  table.style.width=null;
  table.style.tableLayout="fixed";
}//函数块定义结束</script></head><body onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();" ><table border="1" id="table1" style="width:100%;background-color:#eeeeee;"  >
 <tr id="TH1">
  <td >　</td>
  <td >header1</td>
  <td >header2</td>
  <td >header3</td>
  <td >hello hello hello</td>
 </tr>
 <tr>
  <td >1</td>
  <td >1</td>
  <td >
  thank you thany you </td>
  <td >男儿气壮</td>
  <td ><select><option>hello Hello</option></select></td>
 </tr>
 <tr>
  <td >2</td>
  <td >2</td>
  <td >
  you are welcome </td>
  <td >胸中吐万丈长虹</td>
  <td ><input type="text" name="T4" size="20" value="Hello Hello"></td>
 </tr>
</table>
<script language ="javascript">
ResizeTable_Init(document.getElementById("table1"),true,true);
</script>
</body></html>

解决方案 »

  1.   

    上楼的代码的更新版：<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <script language="javascript">
    var ResizeTable_CurrentTdObj=null;
    function ResizeTable_MouseDown(event,obj){
      obj=obj||this;
      event=event||window.event;
      ResizeTable_CurrentTdObj=obj;
      obj.mouseDownX=event.clientX;
      obj.mouseDownY=event.clientY;
      obj.tdW=obj.offsetWidth;
      obj.tdH=obj.offsetHeight;
      if(obj.setCapture) obj.setCapture();
      else event.preventDefault();
    }
    function ResizeTable_MouseMove(event){
      if(!ResizeTable_CurrentTdObj) return ;
      var obj=ResizeTable_CurrentTdObj;
      event=event||window.event;
        if(!obj.mouseDownX) return false;
        if(obj.parentNode.rowIndex==0) {
          var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
          if(newWidth>0) obj.style.width = newWidth;
        else obj.style.width =1;
      }
      if(obj.cellIndex==0){
          var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
          if(newHeight>0) obj.style.height = newHeight;
        else obj.style.height =1;
      }
    }
    function ResizeTable_MouseUp(){
      if(!ResizeTable_CurrentTdObj) return;
      if (ResizeTable_CurrentTdObj.releaseCapture) ResizeTable_CurrentTdObj.releaseCapture();
      ResizeTable_CurrentTdObj=null;
    }
    function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
    {
      if(!needChangeWidth && !needChangeHeight) return;
      var oTh=table.rows[0];
      if(needChangeWidth){
        for(var i=0;i<oTh.cells.length;i++)   {
           var cell=oTh.cells[i];
           cell.style.cursor="e-resize";
           cell.style.width=cell.offsetWidth;
           cell.onmousedown =ResizeTable_MouseDown;
        }
      }
      if(needChangeHeight){
        for(var j=0;j<table.rows.length;j++)   {
           var cell=table.rows[j].cells[0];
           cell.style.cursor="s-resize";
           cell.onmousedown =ResizeTable_MouseDown;
        }
      }
      if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor="se-resize";
      table.style.width=null;
      table.style.tableLayout="fixed";
    }</script></head><body onmousemove="ResizeTable_MouseMove(event);" onmouseup="ResizeTable_MouseUp();" >
    <div style="font-size:10pt;">
    注1：改变Table的列宽<br/>        
    注2：部分代码来自csdn网友bluedoctor:http://community.csdn.net/Expert/topic/5282/5282361.xml<br/>         
    <br/> 
    注：本页面仅在IE6/Firefox1.5下测试过(效果不一致)。其它浏览器或其它版本未经测试。<br/>        
    注-----：JK：<a href="mailTo:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/>     
    <hr/> 
    </div>
    <table border="1" id="table1" style="width:100%;background-color:#eeeeee;"  >
     <tr >
      <td >&nbps;</td>
      <td >header1</td>
      <td >header2</td>
      <td >header3</td>
      <td >hello hello hello</td>
     </tr>
     <tr>
      <td >1</td>
      <td >1</td>
      <td >thank you thank you </td>
      <td >男儿气壮</td>
      <td ><select><option>hello Hello</option></select></td>
     </tr>
     <tr>
      <td >2</td>
      <td >2</td>
      <td >you are welcome </td>
      <td >胸中吐万丈长虹</td>
      <td ><input type="text" name="T4" size="20" value="Hello Hello"></td>
     </tr>
    </table>
    <script language ="javascript">
    ResizeTable_Init(document.getElementById("table1"),true,true);
    </script>
    </body></html>
      

  2.   

    在FIREFOX2。0下可以动。不过效果真的太差了。不知道有没有改进版呀。
      

  3.   

    <td>aaaaaaaaaaaaaaaa</td> 
    拖动到这种状态就不到了。 为何遮蔽不了TD中的字呢
      

  4.   

    其实网络上多的是，asp.net的那更好做了。
      

  5.   

    daxuejianku(无言的悲伤) firefox 下好像不能用。